[ Next.js 13 / page router ] 주요기능

Next.js 파일(pages) 구조

public 						
├── asset     
      ├── image
      └── video

// 어플리케이션의 기능에 사용되는 소스들
component                                			 
├── common              
└── layout              
      ├── layout.tsx
      ├── header.tsx
      ├── nav.tsx
      └── footer.tsx
		                  
pages			
│                  
├── index.tsx
├── _app.tsx         
│                             
├── _document.tsx
│                      
├── api               
└── product
       └── [id].tsx

styles
├── globals.css             
└── Home.modules.css

pages 내부의 파일명에 따라서 해당 컴포넌트의 path가 정해진다.

pages내부에 index.tsx는 path = " / " 가장 첫화면(home)이고
about.tsx는 path = " /about " 이다.

 

pages => product => [id].tsx 의 경우

path = ' /product/id ' 가 된다.

 

 

_app.js 와 _document.js

• 최초로 실행되는 파일들이다
  ( _app.js 는 최초 실행   =>   _document.js 는 _app.js이후실행 )
• pages 폴더 내에 위치해야 한다.
• 두 파일 모두 client 에서 사용하는 로직을 적용할 수 없다 -> eventListner 등
  < _app.js >
  전체 컴포넌트의 레이아웃으로 React.js에서 App.js와 같은 역할이다.
  최초에 실행되어 내부에 들어갈 컴포넌트들을
  전부 실행하고 Html의 Body로 구성하여 rendering한다.

 

 

404 page custom

pages 폴더에 404.js를 생성하고 그 곳에 원하는 커스텀을 해주면 된다.

 

사용예시

export default function NotFound() {
return "What are you doing here?"
}

 

 

 

rewrites기능

rewtrites는 말 그대로 다시 쓰는 기능으로, url에서 바뀐내용이 직접적으로 보여지는 것이 아닌url이나 console, network에서 볼 수 없도록 내부적으로만 바뀐 데이터를 받는 기능이다.

 

사용예시

/** @type {import('next').NextConfig} */
const API_KEY = process.env.API_KEY;

const nextConfig = {
  reactStrictMode: false,
  async rewrites(){
    return[
        {
          source: "/api/movies", //변경된 url
          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}`
      }
        ];
  }
}

module.exports = nextConfig

 

해당 클라이언트 url에 source에 적힌 파라미터를 넣으면 destination에 할당된 내용으로 보여지지만

url에서 보여지는 파라미터는 source에 적힌 파라미터만 보여지게된다.

 

즉 url에 공유가 되면 안될 내용이 포함되어 있는 경우 rewrite를 사용하여

destination내부의 작성하면 된다. 

 

 

redirect기능

url에서 특정한 파라미터로 접속할 경우 따로 지정해둔 페이지로 연동시켜주는 기능이다.

 

사용예시

/** @type {import('next').NextConfig} */
const API_KEY = process.env.API_KEY;

const nextConfig = {
  reactStrictMode: false,
  async redirects(){
    return [
      {
        source:"/contact/:path*", // :path* 는 /contact/123456 처럼 아무거나써도 해당된다.
        destination:"https://www.google.com/", // 이동될 페이지
        permanent:false,
      }
    ];
  },
}

module.exports = nextConfig

 

마치며...

가독성이 좋은 아키텍쳐를 사용하는 것은 정말 좋다고 생각한다. 하지만 next.js의 서버부담이 크다는 단점은 seo가 필요한 서비스가 아닌경우에는 피하는게 좋다고 생각이 들었다.

 

github : https://github.com/zeriong/Nextjs_intro