Written by Parkdev
on February 13, 2024

[Next.js] Nextjs의 라우팅방식

폴더명이 url Path로 자동으로 설정된다.

폴더 구조로 자동으로 route를 해준다.
app/ 안에 폴더를 생성하고 그 안에 page.tsx를 만들어 페이지를 구성하는 기본 함수를 설정하면 url({domain}/{path}) 의 path가 폴더 명으로 자동으로 설정된다.
app폴더 안에 있는 모든 폴더는 전부 서버 component다.

그렇다면 유동적으로 URL을 설정하려면?(ex. 유저 정보)

대괄호 []로 폴더를 만들면된다.

# example
└app
  └user
    └[id]
      └page.tsx

//이후 url로 받은 [id] 파라미터를 사용해서 페이지를 구성하면된다.
const IdPage = ( {params} : { params : {id : string} } ) => {
  return <div>ID: {params.id}</div>;
};

export default IdPage;
// ex {domain}/user/123 로 접속하면 params.id는 '123' 의 값을 가진다

route설정이 되지 않은 폴더를 만드려면?

소괄호()로 폴더를 만들면 된다.

# example
ㄴapp
  ㄴ(test)
      ㄴsomething
      # 이렇게 폴더구조를 설정하면 /test는 페이지가 노출이 되지 않지만 /something으로는 접속이된다.

폴더를 정리하거나 공통으로 적용할 layout을 적용할 때 유용하다.

// (test)/layout.tsx
const TestLayout = ({ children }: { children: React.ReactNode }) => {
  return <div>{children}</div>;
};

export default TestLayout;
//이렇게 작성하면 children props에 자식 폴더의 page.tsx 내용이 들어간다

추가. 라우팅 되지 않는 폴더 만드는 다른 방법

소괄호로 묶인 폴더는 url로 연결되지는 않지만 안에 있는 page, layout파일은 읽는다.
이마저도 불러오지 않도록 하기 위해서는 _를 붙인 폴더를 생성해야한다.
- 기본적인 routing에서는 배제되지만 import를 통해서 사용할 수 있다.

api router 폴더 만드는법

app/{Path}/route.ts 생성

import { NextResponse } from "next/server";

export function GET() {
  return NextResponse.json({
    hello: "trello",
  });
};

이러면api를 생성 가능하다

← → Top