기억보단 기록을/Next JS (App Router)

[NextJS 13] Routing - Defining Routes

_OIL 2023. 5. 30. 19:59
반응형

이 페이지는 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
	- pages
 

GitHub - 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

 

반응형