[Next.js] 라우팅 / getStaticPaths & getStaticProps / userRouter Hook / Redirects & Rewrites

 

파일 기반 라우팅

모든 애플리케이션에서 골격은 라우팅이다. next.js에서 라우팅은 파일 시스템 기반이다. `pages` 디렉터리에 파일을 생성하면, 해당 파일의 이름이 자동으로 URL 경로로 매핑된다.

 

기본 라우팅

• `pages/index.js` -> `/`
• `pages/about.js` ->`/about`
• `pages/blog/first-post.js` -> `/blog/first-post`

---

동적 라우팅

next.js에서는 파일 이름을 대괄호로('[]')로 감싸면 동적 라우팅이 가능하다.

URL 경로의 일부를 변수로 처리하여, 다양한 경로를 하나의 페이지 컴포넌트로 처리할 수 있게 해주는 기능

즉, URL의 특정 부분이 고정된 값이 아니라, 요청에 따라 변할 수 있는 경우 사용

• `pages/blog/[id].js` -> `/blog/:id`
• `/blog/1` -> `id` 값이 `1`인 페이지 렌더링

 

//블로그 포스트를 보여주는 페이지라면, id는 동적으로 변하는 부분을 나타냄
//pages/posts/[id].js 파일 생성

 import {userRouter} from 'next/router';

 function Post(){
     const router = userRouter();
     const {id} = router.query;

     return <p>Post ID : {id}</p>;
 }

 export default Post;

'/posts/1' , '/posts/2', '.posts/abc'와 같은 경로로 접근 가능하며 id 값이 각각 1,2, ...로 전달이 된다.

 

 

이런 동적 페이지에서, URL 파라미터에 접근하려면 Next.js 가 제공하는 `getStaticPath`와 `getStaticProps`, `getServerProps` 같은 함수를 사용할 수 있다.

 

---

getStaticPaths & getStaticProps 사용

 - 동적 라우팅에서 정적 사이트 생성을 지원하기 위해 `getStaticPaths`와 `getStaticProps`를 함께 사용할 수 있다.

• `getStaticPaths` : 어떤 경로를 사전 렌더링할지 결정한다.
• `getStaticProps` : 각 경로에 대한 데이터를 패칭하고, 해당 데이터를 페이지 컴포넌트에 전달한다.

//pages/posts/[id].js

export async function getStaticPaths() {
    const paths = [
         {params: {id='1'} },
         {params: {id='2'} },
         {params: {id='3'} },
    ];

    return {paths, fallback:false};
}

export async function getstaticProps({params}) {
    //id를 사용해 데이터를 패칭
    const post = await fetch(`https://api.exemple.com/posts/${params.id}`)
    ,then(res => res.json());

    return {props:[post] };
    
}

function Post({post}){
    return <div>{post.title}</div>;
}
export default Post;

 

'getStaticPaths'는 빌드 시 생성할 경로 목록을 정의한다. 'posts/1' 경로를 사전 렌더링 한다.

'getStaticProps'는 각 경로에 대해 데이터를 가져와 페이지 컴포넌트에 전달한다.

 

'fallback' 옵션

`fallback : false`	'getStaticPaths'에 정의되지 않은 경로로 접근하면 404 페이지를 보여준다.
`fallback : true`	미리 생성되지 않은 페이지에 대한 ㅛ청이 오면, 서버에서 해당 페이지를 생성한 후 클라이언트에 제공하고, 이후 요청에 대해 정적 페이지로 제공한다.
` fallback : 'blocking `	미리 생성되지 않은 페이지에 대한 요청이 오면, 서버에서 해당 페이지를 생성할 때까지 사용자에게 아무것도 보여주지 않으며, 생성이 완료되면 페이지를 렌더링한다.

 

동적 라우팅이 필요한 상황

 - 블로그 포스트, 사용자 프로필, 상품 상세 페이지 등 URL 경로가 동적으로 변하는 다양한 상황에서 사용이 되고, 이를 통해 하나의 페이지 컴포넌트로 다양한 경로를 처리할 수 있어 코드의 재사용성과 유지보수성을 높일 수 있다.

 

---

userRouter Hook

`userRouter` 훅을 사용하면 라우터 객체에 접근할 수 있으며, 현재 경로 정보나 네비게이션 등의 기능을 제어할 수 있다.

import { userRouter } from 'next/router';

function MyComponent() {
	const router = userRouter();
    
    const handleClick = () => {
    	router.push('/about');
    };
    
    return <button onClick = {handleClick}>Go to About</button>;
 }

 

---

Redirects 및 Rewrites

Next.js의 `next.config.js`파일에서 `redirects`와 `rewrites` 설정을 통해 URL 리다이렉션 및 URL 재작성을 정의할 수 있다.

 

//next.config.js
module.exports = {
	async redirect(){
    	return [
        	{
            	source: `/old-page`,
                destination: `/new-page`,
                permanent: true,
             },
          ];
       },
       async rewrites(){
       	return [
        	{
            	source: `/blog/:slug`,
                destination: `/news/slug`,
             },
        ];
     },
  };

	async redirect(){
    	return [
        	{
            	source: `/old-page`,
                destination: `/new-page`,
                permanent: true,
             },
          ];
       },

• `rediirects` 는 사용자가 특정 URL에 접근했을 때, 해당 요청을 다른 URL로 redirect(전환)하는 역할을 한다.
• `source` : 리다렉션이 발생할 URL 경로이다. 사용자가 '/old-page` 경로로 접근하면 리다렉션이 발생한다.
• `destination` : 사용자를 리다렉션할 새로운 URL 경로이다. 여기서는 `/new-page`로 리다렉션이다.
• `premanent` : true로 설정되면, 브라우저에게 이 리다렉션이 영구적(301)임을 알려준다. 즉 브라우저는 이 리디렉션을 캐시할 수 있다. 반면 `false`로 설정하면 일시적(302)으로 처리된다.

`/old-page`로 들어오는 모든 요청이 `/new-page`로 영구적으로 리디렉션된다.

  async rewrites(){
       	return [
        	{
            	source: `/blog/:slug`,
                destination: `/news/slug`,
             },
        ];
     },

`rewrites`는 특정 URL로 들어오는 요처을 내부적으로 다른 URL로 매핑하여 처리하는 역할을 한다. 외부에서는 URL이 바뀌지 않지만, 서버에서는 다른 경로로 요청을 처리한다.

 

• `source` : 사용자가 접근할 URL 패턴이다. `:slug`는 동적 세그먼트로, 어떤 값이든 이 자리에 올 수 있다. 예를 들어, `/blog/first-post`나 `/blog/nextjs-post` 등 다양한 경로를 포함할 수 있다.
• `destination` : 내부적으로 요청을 처리하는 경로이다. `:slug`부분은 'source`의 값을 그대로 전달 받는다. 예를 들어, `/blog/first-post` 요청은 내부적으로 `/news/first-post`로 처리된다.

---

Middleware

Next.js 12 이상 버전에서는 Middleware 기능을 통해 요청이 서버로 도달하기 전 실행할 코드를 작성할 수 있다. 권한 체크, 리다이렉션, 쿠키 처리 등을 수행할 수 있다.

//middleware.js
import {NextResposce} from 'next/server';

export function middleware(req){
	const url = req.nextUrl.clone();
    if((url.pathname === '/about'){
    	url.pathname = '/new-about';
        return NextResponse.redirect(url);
    }
    return NextResponse.next();
 }