Next.js 페이지 구성 방법 (작성중...)

NSH·2022년 5월 20일

1. 페이지(Pages)

Next.js에서 페이지는 pages 디렉토리 내부의 '.js', '.jsx', '.ts', '.tsx' 파일에서 내보낸 React 컴포넌트이다. 각 페이지는 파일 이름에 따라 경로와 연결된다.

예를 들어 아래처럼 React 컴포넌트를 내보내는 pages/about.js를 만들면 /about 경로에 접근할 수 있다.

function About() {
	return <div>About</div>
}
export default About;

2. Dynamic Routes(동적 경로)

Next.js는 동적 경로가 존재하는 페이지를 지원한다. 예를 들어 만약 'pages/posts/[id.js' 라는 파일을 만들면 posts/1, posts/2등에 접근할 수 있다.

To learn more about dynamic routing, check the Dynamic Routing documentation.
동적 라우팅에 대해서 더 배워보고 싶다면 위 경로를 참고하자.

3. Pre-rendering(사전 랜더링)

기본적으로 Next.js는 모든 페이지를 Pre-rendering(사전 랜더링) 한다. 이것은 Next.js가 클라이언트의 Javascript로 모든 작업을 수행하는 대신 각 페이지에 대한 HTML을 미리 생성한다.

Pre-rendering(사전 랜더링) 을 수행하면 성능과 SEO(Search Engine Optimization, 검색 엔진 최적화)를 향상시킨다.

생성된 각 HTML은 해당 페이지에 필요한 최소한의 Javascript 코드와 연결된다. 브라우저에 의해 페이지가 로드되면 자바스크립트 코드가 실행되어 페이지와 상호작용을 한다.

4. Two forms of Pre-rendering(사전 랜더링 두 가지 방법)

Next.js는 두 가지 형태의 Pre-rendering(사전 랜더링)인 SSG(Static-Site-Generation)와 SSR(Server-Side-Rendering)이 존재한다.

SSG(Static-Site-Generation)
사전 랜더링의 첫 번째 형식인 SSG는 빌드 시 HTML을 미리 생성 하고 요청이 들어올 때마다 미리 생성된 HTML 파일을 응답한다.

SSR(Server-Side-Rendering)
SSG와 다르게 미리 HTML 파일을 생성하지 않고 요청이 들어올 때마다 HTML 파일을 생성 해서 응답한다.

Next.js를 사용하면 각 페이지마다 사전 랜더링 형식을 설정할 수 있다. 두 가지 형식을 혼합해서 하이브리드 앱을 만들 수 있다.

성능상의 이유로 SSR 보다는 SSG 를 사용하는 것이 좋다. 정적으로 생성된 페이지는 추가적인 구성 없이 CDN에서 캐시할 수 있기 때문에 성능이 더 좋다. 하지만 어떤 경우에는 SSR이 더 좋은 선택이 될 수 있다.

4.1 SSG without data

Next.js는 기본적으로 외부 데이터를 가져오지 않는 정적 페이지(About Page)를 생성한다. 정적 페이지(About Page)는 Next.js가 빌드를 진행하는 동안에 단일 HTML 파일을 생성한다.

function About() {
	return <div>About</div>
}
export default About;

4.2 SSG with data

일부 페이지는 사전 랜더링을 위해 외부 데이터가 필요한 경우가 존재한다. 이를 위해서 Next.js는 두 가지 기능을 제공한다.

페이지의 내용을 getStaticProps를 사용해 외부 데이터를 가져와 구성할 수 있다.
페이지의 경로를 getStatisPaths를 사용해 외부 데이터를 가져와 구성할 수 있으며 때로는 getStaticProps를 함께 사용할 수 있다.

4.2.1 getStaticProps

블로그 페이지에서 블로그 게시물 목록을 가져와야 한다고 가정해보자. 사전 랜더링에서는 export 된 async 함수를 허용한다. getStaticProps 함수는 빌드 시 호출되며 외부에서 가져온 데이터를 Blog 컴포넌트의 props로 전달할 수 있다.

function Blog({ posts }) {
	return (
    	<ul>
      		{posts.map((post) => (
    			<li>{post.title}</li>
            ))}
      	</ul>
    )
}

// 이 함수는 빌드 시 호출된다.
export async function getStaticProps() {
    // 외부 데이터를 가져온다.
	const res = await fetch('https://..../posts');
  	const posts = res.json();
  
    // 반환된 { props: { posts } } 객체는 빌드 시 
    // Blog 컴포넌트의 props에 전달된다.
  	return {
    	props: {
        	posts,
        }
    }
}

export default Blog;

4.2.2 getStaticPath

Next.js를 사용하면 동적 경로도 사전 랜더링 페이지를 만들 수 있다. 예를 들어 pages/post/[id].js 라는 파일이 존재할 때 id 의 범위가 1 ~ 10 으로 정해져 있다면 우리는 id: 1 부터 id: 10 까지 총 10개의 사전 랜더링 페이지를 만들 수 있다. 만약 id의 범위가 무제한으로 늘어나는 상황에서는 사용하지 않는것이 좋다.

// 이 함수는 빌드 시 호출된다.
export async function getStaticPaths() {
  // 외부 데이터를 가져온다.
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 사전 랜더링할 경로 가져오기
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // 빌드 시 위에서 지정한 id 만 사전 랜더링한다.
  // fallback: false는 지정한 paths 이외에 다른 경로로 접근하면 404가 발생해야 된다는것을 의미한다.
  return { paths, fallback: false }
}

4.2.3 getStaticProps + getStaticPath

pages/posts/[id].js 에서 getStaticProps 함수를 내보내야 외부 데이터를 가져와서 사전 랜더링하는데 사용할 수 있다.

// 이 함수는 빌드 시 호출된다.
export async function getStaticPaths() {
  // ...
}

// 이 함수는 빌드 시 호출된다.
export async function getStaticProps({ params }) {
  // 위에서 지정한 id 를 포함하는 params 를 인자로 받을 수 있다.
  // id를 사용해서 외부 데이터를 가져온다.
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // 반환한 객체는 컴포넌트의 props에 전달된다.
  return { props: { post } }
}

export default Post