Next.js Redirection

Next.js의 Redirection 처리하는 방법으로는 크게 두 가지가 있다.

1. next.config.js 에서의 Redirection 처리
2. middleware.js 에서의 Redirection 처리

1. next.config.js

const nextConfig = {
  async redirects() {
    return [
      {
        source: "/before/:path*",
        destination: /after/:path*,
        permanent: true,
        has: [
          {
            type: "host",
            value: "localhost:3000",
          },
        ],
      },
    ];
  },

};

가장 기본적인 Redirection 기능을 수행할때 위와 같은 코드를 작성하면된다.
(배열로 여러가지의 Redirection 을 입력할 수 있다.)
코드를 설명하자면
source => 들어온 경로
destination => 이동될 경로
permanent => 브라우저에게 해당 경로를 기억하게 할 것인가 말것인가
has => 입력된 값에 해당될때 redirection 을 수행한다.
(if문과 비슷하다고 생각하면 편하며, type에는 host, header, query, cookie 값이 들어 갈 수있다.)


2. middleware.ts

middlerware 을 이용한 redirection의 경우는 url정보에서 오는 request 값을 활용하여next.config.js 보다 더 디테일한 동작을 만들 수 있다.

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {

const { search } = request.nextUrl;

if (search.length > 0 ) {
    return NextResponse.redirect(new URL("/", request.url));
  }
}

크게 두 가지의 경우로 redirection 을 처리할 수 있다.
나의 경우는 두 가지 경우 중 한가지의 경우로 redirection 을 처리하지 않고, 성격에 따라 두 가지 공간에 redirection 을 썼다. 어떤 경우는 next.config.js 에서 더 간단히 처리가 되지만, 그렇지 않을 때는 middleware 에서 구현을 하도록 하였다.
이렇게 구현을 했을때 크게 문제를 발견하지 못했지만(아직은...), 한가지 주의사항이 있다면 redirection 우선 순위이다.

1. next.config.js
2. middleware.js

물론 이것보다 앞서 nginx 서버로 동작을 했다면, nginx.config 보다 먼저 리다이렉션을 동작하게 할 수 있다.
내가 진행했던 서비스의 경우 언어별 대응을하는데 next.js 에서 브라우저의 언어값에 맞춰 자동으로 언어별로 리다이렉션을 한다. 이부분이 next.config.js 설정한 https 리다이렉션이 겹치면서 에러를 발생하였다.
이를 해결하기 위해서는 여태까지 짜놨던 구조를 갈아버려야했기에 nginx 에서 해당 부분을 대응하기로 했다.

프로젝트 초기에 미리 이러한 상황을 예측하고 설계를 하였다면, 보다 next.js 의 특성을 살려 프로젝트를 진행할 수 있었텐데, 이 부분이 많이 아쉬웠다. 물론 시간을 들여 설계를 다시 할 수 있겠지만, 이는 현상황에서 비효율적이라 판단하여 nginx 를 이용하여 http 대응을 하였다.
(미리 공부를 더 했었더라면.........)