youngst
Young St_____
youngst
  • 분류 전체보기 (30)
    • Dev (28)
      • JS Family, HTML, CSS (14)
      • Git & Github (0)
      • Projects (7)
      • else (5)
      • TIL (2)
    • 일상 (2)
      • 그냥 글 (1)
      • 사과 농장에서 살아남기 (1)

인기 글

태그

  • 제로베이스스쿨
  • JSEvent
  • jsdoc
  • vscode
  • 후기
  • ReactRouter
  • React
  • 공부내용정리
  • CloneCoding
  • JavaScript
  • TypeScript
  • Vite
  • 제로베이스
  • Next.js
  • 옥소폴리틱스
  • 프론트엔드스쿨
  • GitHub-Page
  • Firebase
  • react-router
  • styled-components

티스토리

hELLO · Designed By 정상우.
youngst

Young St_____

Nextjs 공식문서로 공부하기 - 동적 라우팅
Dev/JS Family, HTML, CSS

Nextjs 공식문서로 공부하기 - 동적 라우팅

2023. 3. 5. 01:45

Dynamic Routes

Next.js는 외부 데이터에 따라 동적으로 라우팅 주소를 사용할 수 있는 '동적 라우팅(Dynamic Routing)'을 지원한다. 가장 흔한 예로는 블로그 포스트의 번호에 따라 /post/1, /post/2 이런식으로 나누는 것이다.

구현 방법은 간단하게 [과 ]로 파일명을 감싸면 된다. ./posts/[id].js 이런 식이다. 컴포넌트 이름은 그대로 사용하면 된다. 다음과 같은 형태로 사용할 수 있다.

import Layout from '../../components/layout';

export default function Post() {
  return <Layout>...</Layout>;
}

export async function getStaticPaths() {
  // Returns an array that looks like this:
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  // Fetch necessary data for the blog post using params.id
}

이전에 다뤘던 getStaticProps에 더해 getStaticPaths라는 새로운 함수가 추가되었다.

Next.js 공식 문서 - 어떻게 다이나믹 라우트는 정적 페이지가 되는가

getStaticPaths

getStaticPaths는 paths와 fallback을 포함하는 객체를 리턴해야한다. 이때 paths는 params라는 요소를 포함하는 객체이다. params는 동적 요소로 쓰일 변수의 이름(여기선 id)을 포함해야한다!

이를 모두 포함해 구현하면 아래의 예제가 된다.

import Layout from "../../components/layout";
import { getPostData } from "../../lib/posts";

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
    </Layout>
  );
}

export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  // Fetch necessary data for the blog post using params.id
  const postData = getPostData(params.id);

  return {
    props: {
      postData,
    },
  };
}

위 코드에서 getStaticProps는 URL에서 params를 받는다!! 리액트 라우터의 params와 비슷하다. 공식문서의 예제에서는 파일명을 id로 이용했지만, 일반적인 블로그에서는 API로 받은 id 값을 넣어주면 된다.

저작자표시 비영리 변경금지 (새창열림)

'Dev > JS Family, HTML, CSS' 카테고리의 다른 글

Next.js 공식문서로 공부하기 - SSG와 SSR  (0) 2023.03.01
NextJS 공식문서로 공부하기 - 블로그 만들기  (1) 2023.02.19
NextJS 공식문서로 공부하기 - Next.js 동작 원리  (0) 2023.02.14
JSDoc 페이지를 GitHub Page로 배포하기  (1) 2023.02.03
[TypeScript] 타입스크립트 입문(6) - JSDoc, 유틸리티 타입, 모듈, 타입선언, 네임스페이스  (0) 2022.09.22
    'Dev/JS Family, HTML, CSS' 카테고리의 다른 글
    • Next.js 공식문서로 공부하기 - SSG와 SSR
    • NextJS 공식문서로 공부하기 - 블로그 만들기
    • NextJS 공식문서로 공부하기 - Next.js 동작 원리
    • JSDoc 페이지를 GitHub Page로 배포하기
    youngst
    youngst
    좋은 프론트엔드 개발자가 되고 싶습니다

    티스토리툴바