Next.js의 라우팅 – 다음 앱에서 앱 라우터를 사용하는 방법-JS 튜토리얼-php.cn

Next.js의 라우팅 – 다음 앱에서 앱 라우터를 사용하는 방법

Susan Sarandon

풀어 주다： 2025-01-17 04:33:12

원래의

854명이 탐색했습니다.

Routing in Next.js – How to Use App Router in Your Next Apps

Next.js 14의 App Router는 app/ 디렉터리 내의 파일 기반 라우팅 시스템을 통해 경로 관리에 혁명을 일으켰습니다. 이 접근 방식은 더 나은 애플리케이션 구조, 모듈성 및 성능을 촉진합니다. 이 가이드에서는 Next.js 프로젝트에서 효과적인 앱 라우터 구현을 간략하게 설명합니다.

앱 라우터 이해

앱 라우터는 경로 정의를 재정의합니다. 디렉터리 구조는 URL 경로에 직접 매핑됩니다. /app 내의 폴더는 경로가 되어 특히 대규모 애플리케이션에서 중첩 레이아웃, 경로 그룹화 및 데이터 가져오기를 단순화합니다.

앱 라우터 설정

Next.js 프로젝트 만들기(필요한 경우): npx create-next-app@latest
앱 라우터는 기본적으로 /app 디렉터리를 통해 Next.js 14에서 활성화됩니다. 추가 구성은 필요하지 않습니다.

기본 라우팅

/app 내의 파일과 폴더는 자동으로 경로에 매핑됩니다.

<code>app/
 ├── page.tsx           # Homepage ("/")
 ├── about/
 │    └── page.tsx      # About page ("/about")
 └── blog/
      ├── page.tsx      # Blog index ("/blog")
      └── [slug]/
           └── page.tsx # Dynamic blog posts ("/blog/[slug]")</code>

로그인 후 복사

정적 경로: app/about/page.tsx는 /about에 매핑됩니다.
동적 경로: 대괄호([])는 동적 세그먼트를 정의합니다. app/blog/[slug]/page.tsx은 /blog/my-post.

레이아웃 및 중첩

앱 라우터는 레이아웃 생성 및 재사용을 단순화합니다.

레이아웃 만들기:

폴더 내의 layout.tsx 파일은 해당 폴더의 모든 페이지와 구성 요소에 적용됩니다.

<code>app/
 ├── layout.tsx         # App-wide layout
 ├── about/
 │    ├── layout.tsx    # About page layout
 │    └── page.tsx      # About page content</code>

로그인 후 복사

<code class="language-javascript">// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <h1>My App</h1>
        {children}
      </body>
    </html>
  );
}</code>

로그인 후 복사

중첩 경로 및 레이아웃:

레이아웃 중첩으로 중첩된 경로 전체에서 일관된 UI를 제공합니다.

<code>app/
 ├── dashboard/
 │    ├── layout.tsx         # Dashboard layout
 │    ├── page.tsx           # Dashboard home ("/dashboard")
 │    └── settings/
 │         └── page.tsx      # Dashboard settings ("/dashboard/settings")</code>

로그인 후 복사

/dashboard/ 레이아웃은 /dashboard 및 /dashboard/settings에 모두 적용됩니다.

경로 그룹

경로 그룹은 괄호로 묶인 폴더를 사용하여 URL을 변경하지 않고 코드를 구성합니다.

<code>app/
 ├── (dashboard)/
 │    ├── profile/
 │    │     └── page.tsx     # "/profile"
 │    ├── settings/
 │    │     └── page.tsx     # "/settings"</code>

로그인 후 복사

/profile과 /settings는 코드 구성을 위해 (dashboard) 아래에 그룹화되어 있습니다.

포괄 경로

파일 이름에 ...이 포함된 여러 URL 세그먼트를 처리합니다. [...]/page.tsx는 /blog/a/b/c을 캡처합니다.

오류 및 로드 상태

Next.js 14는 경로 내의 오류 처리 및 로딩 표시를 위해 error.tsx 및 loading.tsx를 사용합니다.

데이터 가져오기

구성 요소에서 서버 측 데이터를 직접 가져오려면 async/await 또는 후크를 사용하세요.

<code class="language-javascript">// app/dashboard/page.tsx
export default async function DashboardPage() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return <div>{JSON.stringify(data)}</div>;
}</code>

로그인 후 복사

서버 작업

서버 작업을 사용하여 구성 요소 내에서 서버측 로직(예: 양식 제출)을 처리합니다.

배포

앱 라우터 애플리케이션 배포는 표준 Next.js 배포와 동일합니다. 최적의 성능을 위해서는 Vercel을 적극 권장합니다.

Next.js 14 앱 라우터는 깔끔한 코드로 확장 가능한 고성능 애플리케이션을 구축하기 위한 유연한 모듈식 접근 방식을 제공합니다. 이 가이드는 프로젝트에서 해당 기능을 활용하기 위한 기초를 제공합니다.

위 내용은 Next.js의 라우팅 – 다음 앱에서 앱 라우터를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!