이 페이지는 Next.js 애플리케이션에서 경로를 정의하고 구성하는 방법을 안내합니다.
Route 만들기
Next.js는 폴더가 경로를 정의하는 데 사용되는 파일 시스템 기반 라우터를 사용합니다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타냅니다. 중첩된 경로를 만들려면 폴더를 서로 중첩할 수 있습니다.
경로 세그먼트를 공개적으로 액세스 할 수 있도록 특수 page.js 파일이 사용됩니다.
위 그림에서 /dashboard/analytics URL 경로는 해당 page.js 파일이 없기 때문에 공개적으로 액세스 할 수 없습니다. 이 폴더는 구성 요소, 스타일시트, 이미지 또는 기타 배치된 파일을 저장하는 데 사용할 수 있습니다.
UI 만들기
각 경로 세그먼트에 대한 UI를 생성하기 위해 특별한 파일 규칙이 사용됩니다. 가장 일반적인 방법은 경로별로 고유한 UI를 보여주기 위한 page와
예를 들어, 첫 번째 페이지를 생성하려면 app 디렉토리 내에 page.js 파일을 추가하고 React 컴포넌트를 내보냅니다.
/* app/page.tsx */
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
아래 코드는 여러 경로에서 공유되는 UI를 보여주기 위한 layout입니다.
/* app/layout.tsx */
import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
요약 및 느낀점
app디렉터리 하위에 있는 파일명들은 특정 파일명(예: page.tsx, layout.tsx 등)으로 시작해야 공개적으로 접근할 수 있어서 지역성 원칙에 더 적합한 프로젝트 구조를 만들 수 있을 거 같습니다.
기존에는 pages디렉터리 하위에 있는 파일들은 모두 공개적으로 접근 할 수 있어서 접근을 원치 않는 컴포넌트들은 pages 디렉터리 외부로 빼거나
// 기존 방식 pageExtensions설정을 하지 않은 경우 프로젝트 구조가 지역성원칙을 지키기 어렵습니다.
- my-project
- components // 3. 그래서 dashboard의 컴포넌트를 외부에 따로 배치함. 이러면 지역성 원칙이 깨짐
- dashboard
- header.tsx
- utils // 4. dashboard의 util 관련 함수만 담고 있지만 정적 파일이 생성되서 외부로 배치함, 이러면 다른 개발자가 공용 파일로 생각하고 다른 컴포넌트의 util을 넣을 가능성이 생김
- index.tsx
- pages
- dashboard
- components // 2. 빌드 시 접근 가능한 정적 파일이 생성됨, 개발자가 의도 하지 않은 누구나 접근가능한 페이지 개념이 됩니다.
- footer.tsx
- index.tsx // 1. 개발자가 의도한, 사용자에게 보여져야 하는 페이지next.config.js 에 pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"] 같은 옵션을 설정해 지역성 원칙을 지켰는데
// 기존 방식 next.config.js에서 pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"]설정 한 경우
// 이렇게 하면 page가 붙지 않은 파일들은 빌드 시 컴파일러가 정적 파일을 생성하지 않음
- my-project
- pages
- dashboard
- index.page.tsx
- components
- header.tsx
- footer.tsx
- utils
- index.tsx앱 라우터 방식을 사용하면 프로젝트 구조가 자연스럽게 지역성 원칙에 맞게 설계될 것으로 보입니다.
// app route 방식
- my-project
- app
- dashboard
- page.tsx
- components
- header.tsx
- footer.tsx
- utils
- index.tsx
- pagesGitHub - guswls1846/nextjs13-playgaround: next js 13 놀이터
next js 13 놀이터. Contribute to guswls1846/nextjs13-playgaround development by creating an account on GitHub.
github.com
참조
Routing: Defining Routes | Next.js
We recommend reading the Routing Fundamentals page before continuing. This page will guide you through how to define and organize routes in your Next.js application. Each folder represents a route segment that maps to a URL segment. To create a nested rout
nextjs.org
'기억보단 기록을 > Next JS (App Router)' 카테고리의 다른 글
| [NextJS 13] Routing - Linking and Navigating (0) | 2023.06.03 |
|---|---|
| [NextJS 13] Routing - Pages and Layouts (1) | 2023.05.31 |
| [NextJS 13] Routing - Routing Fundamentals (0) | 2023.05.30 |
| [NextJS 13] Getting Started - React Essentials (0) | 2023.05.28 |
| [NextJS 13] Getting Started - app Routing Project Structure(앱 라우팅 프로젝트 구조) (0) | 2023.05.24 |
