[Next.js] Next.js 시작하기 (1) 세팅 및 route

Next.js에 대해서 간단하게 배워보겠습니다.

1. Next.js 공식 사이트에 들어갑니다. 사이트

공식 사이트에 나와있는 대로 터미널 창에 명령어를 치면서 진행합니다.

npx create-next-app@latest
// Ok to proceed? y 입력 시 아래 단계를 거치게 된다. 각각 원하는대로 답을 하면 된다.


What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

npm run dev 으로 실행한다.

2. 프로젝트 구조

• app : 앱 라우터를 입력하는 페이지
• page : 페이지 컴포넌트

3. 라우팅 파일

• 아래 내용대로 파일을 만들게 되면, 각각의 역할에 맞는 페이지가 생성된다.
  .js,jsx,tsx 아무 형식으로나 만들어도 된다.
  다만 error, global-error 의 경우 컴포넌트 상단에 'use client' 를 작성해주어야 에러가 나지 않는다.

  • layout.tsx
  • page.tsx
  • loading.tsx
  • not-found.tsx
  • error.tsx
  • global-error.tsx
  • template.tsx
  • default.tsx

• 각 루트별 페이지가 될 파일이 바로 page.tsx

• 각 루트별 레이아웃이 될 파일은 각 폴더 별로 layout.tsx파일을 생성하면 레이아웃이 적용 된다. 주의할 점은, 레이아웃 컴포넌트 안에 {children} 을 넣어주어야 그 안에 페이지 컴포넌트가 들어간다는 점!

• 간단하게 위 라우터들 중에 404 에러인 not-found.tsx 파일을 테스트해보겠다.

  간단하게, not-found.tsx 파일을 루트폴더 위치에 만든 후, 404에러를 발생시키면..!
  아래와 같이 not-found.tsx 파일이 페이지로 보여지게 된다.
  참고로! 당연하게도, 루트 경로에 있는 layout.tsx 파일도 함께 보여진다.
  

4. 중첩, 동적 경로

• 중첩 경로
  폴더를 기준으로 페이지 경로가 나뉘게 된다. 폴더명이 곧 경로이름이 되며, 폴더 안에 폴더가 있으면 중첩 경로를 생성하게 되는 것이다.
  • a폴더>b폴더 : a/b 경로
    
    

• 동적 경로
  폴더 명에 [ id ] 로 작성하면 props를 통해 찾아올 수 있다.

  • params.id 로 추출해올 수 있다.

  • 상위 파일인 레이아웃에서도 가지고 올 수 있다.
    

    export default function Page({ params }: { params: { id: string } }) {
    return (
      <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
        다이나믹라우트 : {params.id}
      </div>
    );
    }
    

5. 라우트 그룹, 핸들러

• 라우트 그룹

  • 사용법 : () 소괄호로 폴더를 생성하여 관리한다.
  • 여러 페이지를 그룹화 하고, 레이아웃을 적용해주고 싶거나, 공통으로 스켈레톤을 적용한다거나 할 때 사용한다.

• 라우트 핸들러

  • API 요청을 커스텀할 수 있는 핸들러 파일이다.

  • 보통 api/api요청주소 로 작성되기에 api폴더 내에 만든다.

  • api/test 폴더 내에 route.ts 파일을 작성하여 api를 생성하게 되면 해당 경로로 api 요청을 할 수 있게된다.

    import { NextResponse } from "next/server";
    
    export async function GET(request: Request) {
      return NextResponse.json({ data: "응답 완료!" });
    }
    

  다음에 이어서 설명해보겠습니다.