Next.js의 라우팅 – 다음 앱에서 앱 라우터를 사용하는 방법
- Susan Sarandon원래의
- 2025-01-17 04:33:12859검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!