본문 바로가기

개발

[Next.js] RSC, Routing

React Server Components

리액트의 컴포넌트를 서버 컴포넌트와 클라이언트 컴포넌트 두 가지로 나누었습니다.

 

특징

  • Nextjs에서는 모든 컴포넌트를 서버 컴포넌트로 다룹니다.
  • 이 컴포넌트는 파일 읽기나 데이터 패칭 등 데이터베이스에 직접 접근하는 서버 사이드 작업을 수행할 수 있습니다. 반면에 리액트의 훅을 사용할 수 없고 ui를 다룰 수 없습니다.
  • 클라이언트 컴포넌트를 만들기 위해서는 'use client'를 컴포넌트 파일의 최상단에 작성해야 합니다. 해당 컴포넌트는 서버 컴포넌트의 역할을 할 수 없습니다.

Routing

라우팅의 경우 file system을 기반으로 결정되고 지켜야 하는 컨벤션이 있습니다.

 

컨벤션

  • 모든 라우트는 app 폴더 아래에 있어야 합니다.
  • 라우트 파일의 이름은 page.js 또는 page.tsx입니다.
  • 각 폴더는 URL 경로의 일부(segment)를 나타냅니다.
app 폴더에 page.js or page.tsx를 만들고 `npm run dev` 명령어를 실행하는 경우 nextjs가 자동으로 layout.tsx를 생성해 줍니다.
layout.tsx 자동 생성

하지만 하위 라우팅에 대해서는 따로 생성되지 않습니다.

 

더보기

layout.tsx

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

존재하지 않는 페이지 라우팅에 대해서는 기본적으로 제공해 주는 페이지가 존재합니다.

존재하지 않는 페이지

Nextjs에서는 추가적인 설정 없이 라우팅의 컨벤션만 잘 사용하면 자동으로 라우팅이 이루어집니다.

예를 들어 위 이미지를 보면 기본적인 /(루트)와 그 밑으로 /about, /profile 페이지가 존재합니다.

 

Nested routes

네스티드 라우트는 기존 라우트의 하위 라우트를 의미합니다. /profile/birth와 같은 형식을 의미합니다.

 

아주 간단하게 해결할 수 있습니다. app 밑에 폴더를 지정해서 /about을 만들었듯이 원하는 폴더 밑에 폴더를 생성하면 해당 이름으로 라우트가 생성됩니다.

 

지금까지 학습으로 드는 생각은 그렇다면 Nextjs를 사용하면 폴더에 하위 폴더를 만드는 것은 주의할 필요가 있겠구나입니다.라고 생각해서 실험했지만, 만약 이미지나 필요한 파일 또는 데이터를 넣어야 한다면 해당 폴더 내부에 page.js 또는 page.tsx만 조심하면 문제가 없을 것 같습니다.

 

참고

https://nextjs.org/docs/app/getting-started/server-and-client-components

https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY

'개발' 카테고리의 다른 글

[Next.js] catch-all segments, custom not found page  (0) 2025.05.30
[Next.js] Dynamic routes  (0) 2025.05.28
[Next.js] how to start  (0) 2025.05.26
[사이드 프로젝트] LIM  (0) 2025.05.25
[윈도우] 10에서 11로 업데이트하기  (0) 2025.05.13