Next.js 14에서 앱 라우팅을 수행하는 방법-JS 튜토리얼-php.cn

Next.js 14에서 앱 라우팅을 수행하는 방법

WBOY

풀어 주다： 2024-08-06 12:43:03

원래의

675명이 탐색했습니다.

How to Do App Routing in Next.js 14

Next.js 14는 강력한 프레임워크를 지속적으로 향상하여 개발자에게 React 애플리케이션 구축을 위한 강력한 기능을 제공합니다. 모든 웹 애플리케이션의 주요 측면 중 하나는 라우팅이며 Next.js는 라우팅을 놀라울 정도로 간단하고 효율적으로 만듭니다. 이 게시물에서는 Next.js 14에서 앱 라우팅을 설정하고 사용하는 방법을 살펴보겠습니다.

Next.js 라우팅 소개

Next.js는 파일 기반 라우팅 시스템을 사용합니다. 즉, 페이지 디렉터리 구조에 따라 애플리케이션의 경로가 결정됩니다. 페이지 디렉토리 내부의 각 파일은 경로가 됩니다.

기본 라우팅

기본 경로를 생성하려면 페이지 디렉토리에 새 파일을 추가하기만 하면 됩니다. 예를 들어 페이지 디렉토리 내에 about.js라는 파일을 생성하면 자동으로 /about에서 사용할 수 있습니다.

예:

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

로그인 후 복사

동적 라우팅

Next.js는 대괄호([])를 사용한 동적 라우팅도 지원합니다. 이를 통해 동적 매개변수를 사용하여 경로를 생성할 수 있습니다.

예:

// pages/product/[id].js
import { useRouter } from 'next/router';

export default function Product() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Product {id}</h1>
    </div>
  );
}

로그인 후 복사

이 예에서 페이지/제품 디렉토리 내의 [id].js라는 파일은 /product/1, /product/2 등을 통해 액세스할 수 있는 동적 경로를 생성합니다.

중첩된 경로

페이지 디렉토리 내에 폴더를 추가하여 중첩된 경로를 생성할 수 있습니다. 각 폴더는 URL 경로의 일부를 나타냅니다.

예:

// pages/blog/index.js
export default function Blog() {
  return (
    <div>
      <h1>Blog Home</h1>
    </div>
  );
}

// pages/blog/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Blog Post: {slug}</h1>
    </div>
  );
}

로그인 후 복사

이 설정에서 /blog 경로는 index.js를 렌더링하고 /blog/[slug]는 [slug].js를 렌더링합니다.

API 경로

Next.js는 API 경로도 지원하므로 애플리케이션에서 백엔드 엔드포인트를 생성할 수 있습니다. 이는 페이지/api 디렉토리에 있습니다.

예:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World' });
}

로그인 후 복사

이 파일은 JSON 메시지로 응답하는 API 엔드포인트를 /api/hello에 생성합니다.

라우터 사용자 정의

Next.js 14에서는 next/router 패키지를 사용하여 더 많은 사용자 정의 및 고급 라우팅 전략을 사용할 수 있습니다. 프로그래밍 방식으로 페이지 간을 탐색하고 보다 복잡한 라우팅 시나리오를 처리할 수 있습니다.

예:

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const navigateToAbout = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={navigateToAbout}>Go to About Page</button>
    </div>
  );
}

로그인 후 복사