[Next.js] Next.js 프로젝트 시작하기

 

이 글은 Next.js의 공식 튜토리얼 문서를 참고하여 작성한 글입니다.

 

---

 

React를 사용하여 완전한 웹 애플리케이션을 만들기 위해서는 고려해야할 주요 사항들이 많이 있다.

• 웹팩과 바벨을 구성하고 사용해야 한다.
• 코드 스플릿팅과 같이 프로덕션 단계에서 최적화를 해야 할 필요가 있다.
• 성능과 SEO를 위해 정적으로 사전 렌더링을 원할 때가 있다. 또한 서버 사이드 렌더링이나 클라이언트 사이드 렌더링을 사용하고 싶을 때가 있다.
• 데이터의 저장을 위해 서버 단의 코드를 React 앱과 연결하여야 한다.

 

많은 프레임워크들이 이러한 문제들을 해결해준다. 하지만 그러한 프레임워크들은 어느정도의 실력을 갖추어야 한다. 그렇지 않다면 그렇게 까지 유용하지 않을 것이다. 또한 학습에 있어 상당한 러닝커브를 감수해야하며, 팀과 개인으로 코드를 작성하는 동안에 만족할만한 결과를 내기 위해선 좋은 '개발자 경험'이 필요하다.

 

Next.js?

Next.js는 React 프레임워크이다. Next.js는 위에서 언급한 여러 고려사항들의 해결책을 제시해준다. 이를 토대로 팀이나 개인으로 진행하는 React 애플리케이션 개발을 좀 더 수월하게 해줄 수 있다.

그렇다면 Next.js에서 제공하는 기능들에는 어떠한 것들이 있을까?

• 다이나믹 라우트를 지원하는 직관적인 페이지 기반의 라우팅 시스템
• 각 페이지 마다 기본적으로 사전 렌더링, SSG(Static Generation)과 SSR(Server-Side Rendering)을 지원한다.
• 빠른 페이지 로딩을 위한 자동 코드 스플릿팅
• 최적화된 프리페칭을 이용한 클라이언트 사이드 라우팅
• Built-in CSS과 Sass 지원, 그리고 다른 CSS-in-JS 라이브러리 지원
• 개발 환경에서의 빠른 리프레시 지원
• 서버리스 환경에서 API를 구축하기 위한 API라우트
• 넓은 확장성

 

이처럼 많은 기능을 제공하고 있는 Next.js는 세계적으로 유명한 기업들을 포함하여 수많은 웹사이트와 웹 애플리케이션에서 사용되고 있다.

 

Next.js 시작하기

Next.js를 시작하기 전에, Node.js를 설치안했다면 이 곳에서 설치를 해주자. 10.13 이상의 Node.js 버전이 필요하다.

그럼 이제 프로젝트를 생성해보자. 아래 명령어를 터미널에 입력한다.

 

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

 

--example를 통해 Next.js에서 제공하는 기본 템플릿을 사용한다. 설치가 다 되었으면 프로젝트 디렉토리인 nextjs-blog로 이동한다.

 

cd nextjs-blog

 

그리고 다음 명령어를 통해 실행시키자.

 

npm run dev

 

이렇게 하면 개발 서버가 3000번 포트에서 돌아가고 있을 것이다.

http://localhost:3000/에서 확인해보자.

여기까지 했다면 Next.js 프로젝트를 시작하기 위한 준비가 끝났다.

 

이제 Next.js를 시작해보자!