Next.js Crash Course for Beginners 2021 강의노트(2): Starting NextJS

(🛑 해당 포스팅은 Youtube에 업로드된 Academind의 NextJS 튜토리얼 강의 콘텐츠의 강의노트입니다. 링크를 클릭하시면 강의를 들으실 수 있습니다.)

Creating a NextJS Project & IDE Setup

npx create-next-app@latest
# or
yarn create next-app

위 명령어를 통해서 간단하게 NextJS 프로젝트를 시작해줄 수 있다. 프로젝트 이름은 임의로 설정해주도록 한다.

설치를 완료하면, 위 이미지에서 확인할 수 있는 것과 같이 프로젝트 폴더를 확인할 수 있다.

Analyzing the Created Project

위 폴더에서 주요하게 살펴보아야 할 폴더는 세 가지이다.

각각은 다음과 같다.

• pages 폴더
• public 폴더
• styles 폴더

보통 React를 통해 프로젝트를 시작하면 public 폴더 내부에 index.html이 존재한다. 그러나 NextJS에는 해당 폴더 내부에 index.html이 존재하지 않는다. NextJS는 Pre-Rendering되기 때문이다. (NextJS에서는 언제 페이지가 Pre-render되어야 하는지 결정할 수 있다. 이 부분은 나중에 따로 다룰 것이다.)

NextJS는 우리에게 SPA를 내려주는데, 이 SPA는 요청이 서버에 도달했을 때 동적으로 프리렌더된 싱글페이지이다. 그렇기 때문에 pages 폴더가 우리에게 더욱 중요한 것이다. pages는 우리가 file-based routing을 구현할 공간이다.

Adding First Pages To The Project

우선 _app.js 파일은 무시해도 좋고, api 폴더는 삭제해도 무방하다.
일단 기본적인 구조에 집중하기 위해서, index.js도 삭제해주고, css 모듈들도 삭제한다.

우리가 만들어 볼 프로젝트는 총 세 가지 페이지로 구성되어 있다.

1) index.js
2) newspage
3) newsdetail

총 세가지 파일을 pages 폴더에 만들어주어야 한다.
1) index.js: 프로젝트의 루트페이지에 해당한다. our-domain.com/(nothing)으로 요청이가면 index.js가 로드될 것이다.
2) news.js: pages 폴더에서는 파일이름이 곧 path name이 되기 때문에, 파일이름을 잘 지어주어야 한다. news라는 이름의 파일을 생성해주고 나서, /news로 요청이 가면 이제 해당 파일이 로드된다.

NextJS는 모던 리액트를 지원하므로, 각 페이지나 컴포넌트에서 React를 임포트해주지 않아도 좋다.

// our-domain.com/

function HomePage() {
  return <h1>The Home Page</h1>;
}

export default HomePage;

// our-domain.com/news

function NewsPage() {
  return <h1>The News Page</h1>;
}

export default NewsPage;

위와 같이 작성해주고 npm run dev를 통해 디벨롭먼트 서버를 실행시켜주면 아래와 같은 모습을 확인할 수 있다.

놀라운 점은 우클릭 후 소스코드를 살펴보면 더 이상 비어있는 html이 아닌 것을 알 수 있다.

이제는 페이지에서 어떠한 플리커링을 겪지 않아도 된다. 이미 서버에서 렌더링이 마무리된 콘텐츠이기 때문이다. 그리고 어떤 추가적인 라이브러리나 모듈을 사용해서 라우팅을 구현하지 않아도 된다는 점도 알 수 있었다.