[TIL] 230805

Nextjs

App Router(13.4 ver)

모든 컴포넌트가 Server Component 이라서 Client Component 사용하려면 따로 설정해야한다.

보통 유저와 상호작용하는 곳을 제외하고 모두 Server Component를 사용한다.

언제 어떤 컴포넌트가 필요한지는 Next.js 공식 문서에 적혀있으니 확인해보자

• 설치
  프로젝트 생성할 때 App Router 설정에서 Yes 설정해주면 된다.
  
• Styling
  Tailwind CSS 사용한다.
  
• Meta Data
  export, import로 메타데이터를 활용할 수 있다.
  정적으로 사용할 때에는 선언하여 사용하면 되고
  정적이지 않을 경우 함수로 선언하여 return문으로 사용할 수 있다.
  
• Page Navigation
  next/link 와 next/router 모듈을 이용하여 구현할 수 있다.
  

서버 컴포넌트에서는 useRouter 를 사용하지 못하기 때문에 "use client" 를 입력하여 클라이언트 컴포넌트로 만들어 주어야 한다.

• API Routes
  app 디렉토리 내에 파일을 만들어 사용한다.
  이름대신 HTTP 메서드를 바로 적어 사용한다. Dynamic route도 지원한다.
  

    // app/'api/todos/[id]/route.js
    import { NextResponse } from "next/server";
    
    export const GET = async (req, { params }) => {
      const { id } = params;
    
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/todos/${id}`
      );
    
      const todo = await response.json();
    
      return NextResponse.json(todo);
    };

• Data Fetching
  App Router는 컴포넌트 단위로 데이터를 가져올 수 있다.
  

    // getServerSideProps - SSR
    fetch(URL, { cache: 'no-store' });
    
    // getStaticProps - SSG
    fetch(URL);
    
    // getStaticProps - ISR
    fetch(URL, { next: { revalidate: 10 } }); // 10초 

• Styling
  Tailwind를 사용 → 프로젝트 생성 시 Yes로 선택하거나 설치해주면 된다.
  

미들웨어와 배포

1. Middleware

• redirect
  NextResponse.redirect
  특정 url로 접근할 때 자동으로 설정된 URL로 이동할 수 있다.
  
• rewrite
  NextResponse.rewrite
  url은 변하지 않지만, 컨텐츠만 설정된 URL의 컨텐츠로 변한다.
  

2. 배포
   vercel에서 쉽게 nextjs를 배포할 수 있다!

전체적으로 Nextjs에 대해 알아보았는데 렌더링과 공식문서를 여러번 읽어보면서 복습하면 이해가 될 것 같다. 내일은 용어를 한번 정리해야겠다.