[노마드 코더] NextJS 시작하기 파트 2리뷰

redirect vs remask 사용법

• next.config.js(JSON파일이 아닌 일반 node.js 모듈, 서버 및 빌드단계에서 사용되며 브라우저 빌드에는 포함되지 않음)에 설정

• reactStrictMode: true,  
  async redirects() {  
  return [
  
  {
    source: '/old-blog/:path*',
    destination: '/new-sexy-blog/:path*',
    permanent: false,
  },  
  ];  
  },  
  async rewrites() {  
  return [
  
  {
    source: '/api/movies',
    destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
  },
  {
    source: '/api/movies/:id',
    destination: `https://api.themoviedb.org/3/movie/:id?api_key=${API_KEY}`,
  },
  ];  
  },  
  };

• source 경로를 destination경로로 redirect시키고 url을 변경
• url 프록시 역할을 하며 destination경로를 source 경로로 mask

getServerSideProps

- next js 13부터 app router에서는 getServerSideProps와 getStaticPops는 사용하지 않음

(왜? data fetching할때 fetchAPI를 대체하여 사용)

Next.js Router 정리

- useRouter 훅을 사용하여 router객체에 접근

- 메서드 

  - push => 히스토리 스택에 url을 추가하며 client side로 페이지 전환 시 사용, url, as, options 옵션을 조절하여 사용 가능

  - replace => 히스토리 스택에 현재 페이지 url을 추가하지 않고, 새로운 url로 대체   

  - prefetch => 필요한 컨텐츠는 미리 불러오고 불필요한 컨텐츠는 미리 가져오기 중지

  - back => 뒤로가기

  - forward => 앞으로 가기

Catch All Routes 

- 페이지에서 모든 path를 가져와 쿼리파라미터화하는 방법

- A폴더내에 [...params].js라는 파일을 생성하면

   A경로 이후에 생성되는 파라미터를 query객체 안의 params 배열에서 조작 가능

 

Page router

- 클라이언트 중심 라우팅

- page 폴더 하위에 있는 모든 파일이 페이지 경로

- 전역에서 공유하는 layout을 지정하기 위해 _app.jsx 사용

App router

-  서버 중심 라우팅

- react server components 기반으로 구축

- 경로 이동시, 페이지를 다시 렌더링 하지 않고 SPA처럼 URL만 업데이트하고 next는 변경된 segment만 렌더링