Next.js에서 동적 경로를 만드는 방법

동적 경로는 URL에서 사용자 정의 매개변수를 사용할 수 있는 페이지입니다. 동적 콘텐츠용 페이지를 생성할 때 특히 유용합니다.

블로그의 경우 동적 경로를 사용하여 블로그 게시물 제목을 기반으로 URL을 만들 수 있습니다. 이 접근 방식은 각 게시물에 대한 페이지 구성 요소를 만드는 것보다 낫습니다.

getStaticProps 및 getStaticPaths라는 두 가지 함수를 정의하여 Next.js에서 동적 경로를 생성할 수 있습니다.

MAKEUSEOF 오늘의 비디오

Next.js에서 동적 경로 생성

Next.js에서 동적 경로를 생성하려면 페이지에 대괄호를 추가하세요. 예: [params].js, [slug].js 또는 [id].js.

블로그의 경우 동적 경로에 슬러그를 사용할 수 있습니다. 따라서 게시물에 슬러그가 있는 경우 동적 경로 다음 , 결과 URL은 https://example.com/dynamic-routes-nextjs입니다.

마우스 스크롤 속도 변경 Windows 10

페이지 폴더에 [slug].js라는 새 파일을 만들고 게시물 데이터를 소품으로 사용하는 Post 구성 요소를 만듭니다.

const Post = ({ postData }) => { 
  return <div>{/* content */}</div>; 
};

게시물 데이터를 게시물에 전달할 수 있는 다양한 방법이 있습니다. 선택하는 방법은 페이지를 렌더링하려는 방법에 따라 다릅니다. 빌드 시간 동안 데이터를 가져오려면 getStaticProps()를 사용하고 요청 시 가져오려면 getServerSideProps()를 사용합니다.

getStaticProps를 사용하여 게시물 데이터 가져오기

블로그 게시물은 자주 변경되지 않으며 빌드 시 가져오는 것으로 충분합니다. 따라서 getStaticProps()를 포함하도록 Post 구성 요소를 수정하십시오.

import { getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{/* content */}</div>; 
}; 
  
export const getStaticProps = async ({ params }) => { 
    const post = await getSinglePost(params.slug); 
    return { 
      props: { ...post }, 
    }; 
  };

getStaticProps 함수는 페이지에 렌더링된 게시물 데이터를 생성합니다. getStaticPaths 함수에 의해 생성된 경로의 슬러그를 사용합니다.

getStaticPaths를 사용하여 경로 가져오기

getStaticPaths() 함수는 미리 렌더링되어야 하는 페이지의 경로를 반환합니다. 이를 포함하도록 Post 구성요소를 변경합니다.

export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
};

이 getStaticPaths 구현은 렌더링되어야 하는 모든 게시물을 가져오고 슬러그를 매개변수로 반환합니다.

Windows 10 부팅 속도를 높이는 방법

전체적으로 [slug].js는 다음과 같습니다.

import { getAllPosts, getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{content}</div>; 
}; 
  
export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export const getStaticProps = async ({ params }) => { 
  const post = await getSinglePost(params.slug); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export default Post;

동적 경로를 생성하려면 getStaticProps() 및 getStaticPaths()를 함께 사용해야 합니다. getStaticPaths() 함수는 동적 경로를 생성해야 하며 getStaticProps()는 각 경로에서 렌더링된 데이터를 가져옵니다.

Next.js에서 중첩된 동적 경로 생성

Next.js에 중첩 경로를 생성하려면 페이지 폴더 안에 새 폴더를 만들고 그 안에 동적 경로를 저장해야 합니다.

예를 들어 /pages/posts/dynamic-routes-nextjs를 생성하려면 [slug].js를 내부에 저장합니다. /페이지/게시물.

동적 경로에서 URL 매개변수 액세스

경로를 생성한 후 검색할 수 있습니다. URL 매개변수 userRouter()를 사용하여 동적 경로에서 반응 후크 .

페이지/[slug].js의 경우 다음과 같이 슬러그를 가져옵니다.

import { useRouter } from 'next/router' 
  
const Post = () => { 
  const router = useRouter() 
  const { slug } = router.query 
  return <p>Post: {slug}</p> 
} 
  
export default Post

게시물의 슬러그가 표시됩니다.

getServerSideProps를 사용한 동적 라우팅

Next.js를 사용하면 빌드 시 데이터를 가져오고 동적 경로를 생성할 수 있습니다. 이 지식을 사용하여 항목 목록에서 페이지를 미리 렌더링할 수 있습니다.

모든 요청에 대해 데이터를 가져오려면 getStaticProps 대신 getServerSideProps를 사용하십시오. 이 접근 방식은 더 느립니다. 정기적으로 변경되는 데이터를 사용할 때만 사용해야 합니다.