Next.js Routing이란? 페이지 네비게이션 가이드!

※ Next.js는 React 기반의 프레임워크로, 프론트엔드와 백엔드 기능을 모두 갖추고 있습니다. Next.js의 라우팅과 관련된 주제는 주로 프론트엔드와 관련이 있지만, 백엔드와의 상호작용도 고려할 수 있습니다.

 

Next.js 14에서의 Routing 개요

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다. Next.js 14에서는 새로운 앱 디렉토리(app directory) 구조와 함께 라우팅 시스템이 도입되어, 페이지와 API 라우팅을 더욱 직관적이고 효율적으로 관리할 수 있습니다.

 

기본적인 Routing 구조

Next.js 14의 app directory에서는 파일 시스템 기반의 라우팅을 제공합니다. 디렉토리와 파일 구조가 URL 구조를 반영하여, 간단한 파일 생성만으로 새로운 페이지를 추가할 수 있습니다.

 

디렉토리 구조 예시

kakaogg/
├── app/
│   ├── page.tsx
│   ├── about/
│   │   └── page.tsx
│   ├── blog/
│   │   ├── [slug]/
│   │   │   └── page.tsx
│   └── api/
│       └── hello.ts

※ 주의 사항으로 페이지는 반드시 page로 만들어야합니다.

• /는 app/page.tsx 파일에 의해 렌더링됩니다.

• /about는 app/about/page.tsx 파일에 의해 렌더링됩니다.

• /blog/[slug]는 동적 라우트로, app/blog/[slug]/page.tsx 파일에 의해 렌더링됩니다.

• /api/hello는 app/api/hello.ts 파일에 의해 처리됩니다.

 

동적 라우팅

눈 여겨봐야할 부분이 바로 동적 라우팅입니다. 정적 페이지와 다르게 []를 사용합니다.

Next.js 14에서는 동적 라우팅을 통해 유연한 URL 구조를 만들 수 있습니다.

// app/blog/[slug]/page.tsx
import { useRouter } from 'next/router';

const BlogPost = () => {
  const router = useRouter();
  const { slug } = router.query;

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

export default BlogPost;

 

중첩 라우팅

Next.js 14의 app directory 구조에서는 중첩 라우팅을 통해 더 복잡한 레이아웃을 관리할 수 있습니다. 중첩된 페이지는 부모 페이지의 레이아웃을 상속받아 구성됩니다.

중첩 라우팅 예시

// app/layout.tsx

const Layout = ({ children }) => {
  return (
    <div>
      <nav>
        {/* Navigation links */}
      </nav>
      <main>{children}</main>
    </div>
  );
};

export default Layout;

// app/settings/page.tsx

const Settings = () => {
  return (
    <div>
      <h1>Settings</h1>
    </div>
  );
};

export default Settings;

위와 같이 작성하면 Settings는 Layout의 {children}부분에 배치됩니다. Settings외 About, Test기타 등등이 와도 Layout의 <nav>는 공통으로 사용하게 됩니다.

 

API 라우팅

Next.js 14에서는 API 라우트를 사용하여 서버리스 함수와 API 엔드포인트를 쉽게 만들 수 있습니다. app/api 디렉토리 내에 파일을 생성하여 API 라우트를 정의합니다.

API 라우트 예시

기존 node, express 등 개발을 진행해봤다면 어려운 부분은 없습니다.

// app/api/hello.ts

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

라우팅을 효과적으로 사용하는 팁

1. 명확한 디렉토리 구조 유지: 파일과 디렉토리를 일관성 있게 관리하여 코드를 쉽게 이해하고 유지보수할 수 있도록 합니다.

2. 동적 라우트 활용: 필요에 따라 동적 라우트를 사용하여 유연한 페이지 네비게이션을 구현합니다.

3. 중첩 라우트로 레이아웃 구성: 중첩 라우트를 사용하여 공통 레이아웃을 관리하고 페이지 간 일관성을 유지합니다.

4. API 라우트로 서버리스 함수 구현: API 라우트를 사용하여 백엔드 로직을 쉽게 추가하고 관리합니다.