Next.js: API 통합을 통한 동적 라우팅.

아이디어

Next.js는 동적 경로(예: /product/[id])를 지원하는 파일 기반 라우팅 시스템을 제공합니다. 이를 동적 데이터 가져오기와 결합하여 유연하고 확장 가능한 애플리케이션을 만들 수 있습니다. 이는 전자상거래 제품 페이지, 사용자 프로필 또는 고유 식별자가 있는 콘텐츠와 같은 경우에 특히 유용합니다.

예: 동적 제품 페이지

1. 동적 경로 설정

/pages/product/와 같은 폴더 안에 [id].tsx라는 파일을 생성하세요.

페이지/제품/[id].tsx

2. 동적 경로에 대한 데이터 가져오기

// pages/product/[id].tsx

import { GetStaticPaths, GetStaticProps } from 'next';

type ProductProps = {
  product: {
    id: string;
    name: string;
    description: string;
    price: number;
  };
};

export default function ProductPage({ product }: ProductProps) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
}

// Generate dynamic paths for the product pages
export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  // Map over the products to define paths
  const paths = products.map((product: { id: string }) => ({
    params: { id: product.id },
  }));

  return {
    paths, // Pre-render these paths at build time
    fallback: 'blocking', // Dynamically render other pages on request
  };
};

// Fetch product data for each page
export const getStaticProps: GetStaticProps = async ({ params }) => {
  const res = await fetch(`https://api.example.com/products/${params?.id}`);
  const product = await res.json();

  // Pass the product data as props
  return {
    props: { product },
    revalidate: 10, // Revalidate every 10 seconds
  };
};

3. 존재하지 않는 페이지 처리

ID가 존재하지 않는 경우를 처리하려면 getStaticProps에서 notFound 속성을 반환하세요.

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const res = await fetch(`https://api.example.com/products/${params?.id}`);

  if (res.status === 404) {
    return { notFound: true };
  }

  const product = await res.json();

  return {
    props: { product },
    revalidate: 10,
  };
};

이 접근 방식의 주요 특징:

1. SEO 친화적: 페이지는 전체 HTML로 사전 렌더링되어 검색 엔진에 적합합니다.

2. 확장 가능: 폴백 렌더링(폴백: '차단')을 사용하여 새 데이터에 대한 페이지를 동적으로 생성할 수 있습니다.

3. 실시간 업데이트: 재검증과 결합하여 수동 배포 없이 데이터를 최신 상태로 유지합니다.

4. 오류 처리: notFound를 사용하여 404 또는 기타 오류를 적절하게 처리합니다.

이 방법을 사용하면 쉽게 확장할 수 있는 매우 동적이고 반응성이 뛰어난 웹 애플리케이션을 구축할 수 있습니다!

위 내용은 Next.js: API 통합을 통한 동적 라우팅.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!