Next.js Basics(2)

회사에서 다음 프로젝트는 Next.js를 이용해서 하기로 했다.
주어진 기한은 총 5일 딱 5일 안에 Next.js의 Basic을 익혀서 바로 프로젝트에서 치고 나가야 한다.

Setup

npx create-next-app --typescript

우리의 경우 typescript를 쓸 것이기 때문에 위처럼 옵션을 추가해준다.
그러고 나서 package.json을 확인해보면 우리가 쓸 수 있는 script를 확인해볼 수 있다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

공식문서를 보면 각각의 script에 대한 설명이 나와있다.

• dev: next dev를 실행하고 Next.js앱을 개발모드로 실행한다.
• build: next build를 실행하고 production용 빌드를 한다.
• start: next start를 실행하고 Next.js의 production용 서버를 실행한다.
• lint: next lint를 실행하고 Next.js에 built-in ESLint 설정파일을 실행한다.

따라서 개발을 할때는

npm run dev

빌드를 할때는

npm run build

Page

Next.js의 가장 큰 장점이라고 생각되는 feature이다. 결론적으로 말하자면 React에서는 Routing을 할때 'react-router-dom'이라고 하는 것을 사용해서 SPA를 구현하고 라우팅을 했다면 Next에서는 이것이 필요없어진다.

pages라고 하는 디렉토리에 about.js라고 하는 파일을 만들고 그 안에서 그 페이지에 해당하는 컴포넌트를 export해주기만 하면 자동 라우팅이 된다. SSG를 써봤다면 알겠지만 그것과 굉장히 비슷한 방식으로 작동한다.

Pre-rendering

pre(미리) render(보이게하다, 그리다, 나타내다) 즉, 미리 보이게하기, 미리 그리기의 의미로 해석할 수 있다.

• Next에서는 매 페이지를 pre-render하는 것이 기본이다.(즉, 매 페이지에 대해서 HTML을 미리 만들어서 가지고 있는다.)

• 이러한 pre-rendering에는 두가지 방식이 있다.
  - Static Generation(추천): HTML이 build time에 만들어지고 매 요청마다 재사용된다.

  • Server-side Rendering: HTML이 매 요청마다 만들어진다.

build time, request time
Next.js문서를 읽다보면 빌드타임과 리퀘스트 타임이 나오는데 이 둘의 차이는 다음과 같다. 빌드타임은 Next.js앱을 빌드할 때를 얘기한다. 그리고 리퀘스트 타임은 next.js가 실행 중이고 요청이 들어왔을 때를 얘기하는 것이다.

Static Generation without Data

• Next.js는 기본적으로 data를 가져오지 않고 page를 pre-render한다.
• 따라서 만약 pages안에 데이터를 불러오지 않고 그대로 렌더될 수 있는 것들은 next가 알아서 미리 HTML을 만들어 놓고 요청이 들어오면 그것을 client에게 보내준다.

Static Generation with Data

많은 경우 데이터를 불러와야할 일이 생긴다. 데이터를 불러오는 것은 두가지 시나리오로 생각해볼 수 있는데 다음과 같다.

1. content가 external data에 영향을 받는 경우, 이럴 경우 getStaticProps를 사용한다.
2. page의 paths가 external data에 영향을 받는 경우, 이럴 경우 getStaticPaths를 사용하는데 getStaticProps와 함께 사용한다.

데이터 불러오기

Next의 경우 getStaticProps라고 하는 비동기 함수를 page가 있는 같은 파일에서 export할 수 있다.

• 이 함수는 build time에 호출이 되고 pre-render될 때 이미 데이터가 page에 props로 전달이 된다.
• 따라서 사용할 때 일련의 패턴이 요구되는데 다음과 같다.

function Blog({ posts }) {
  // Render posts...
}

// This function gets called at build time
export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

위의 코드를 보면 async function getStaticProps()를 export했고 이 함수는 객체를 return하는데 그 안에 프로퍼티로 props가 있고 props의 값은 posts라고 하는 데이터가 들어 있는 객체이다.

그리고 위를 보면 Blog라고 하는 React 엘리먼트는 posts라고 하는 props를 전달 받게 되어 있다. 이 규칙을 지켜서 코드를 짜면 된다.

*getStaticProps에 대해서는 따로 포스팅을 하도록 하겠다.

오늘은 여기까지 적도록 하고, 다음 포스팅부터는 본격적인 Next에 대해서 적어보겠다.