Next.js 미들웨어(Middleware)를 이용하여 사용자 언어별로 리다이렉트 하기.

Next.js는 서버 렌더링 React 애플리케이션을 구축하는 데 널리 사용되는 프레임워크이다. Next.js의 주요 기능 중 하나는 미들웨어를 사용하여 Next.js 애플리케이션에 사용자 정의 기능을 추가하는 기능이다. 이 문서에서는 Next.js 미들웨어를 사용하여 Next.js 애플리케이션에서 국제화를 처리하는 방법을 살펴볼 것이다.

Next.js 미들웨어란?

Next.js 미들웨어는 개발자가 Next.js 애플리케이션에서 요청을 처리하기 전에 사용자 지정 로직을 실행할 수 있는 강력한 도구이다. 인증 설정, 헤더 구문 분석 또는 국제화 처리와 같은 사용자 지정 기능을 추가하는 데 사용할 수 있다.

Next.js 미들웨어로 국제화 처리하기

국제화는 최신 웹 애플리케이션의 중요한 구성 요소이다. 이를 통해 애플리케이션은 여러 언어를 지원하고 사용자가 선호하는 언어에 맞게 조정할 수 있다. 다음 코드는 Next.js 미들웨어를 사용하여 Next.js 애플리케이션에서 국제화를 처리하는 방법이다.

const SUPPORT_LANGUAGE = ['en', 'ko'];

export function middleware(req: NextRequest) {
  if (
    req.nextUrl.pathname.startsWith('/_next') ||
    req.nextUrl.pathname.includes('/api/') ||
    PUBLIC_FILE.test(req.nextUrl.pathname)
  ) {
    return;
  }

  if (req.nextUrl.locale === 'default') {
    var locale = req.cookies.get('NEXT_LOCALE');

    if (locale == undefined) {
      const langs = getParsedAcceptLangs(req.headers.get('Accept-Language'));
      for (let index = 0; index < langs.length; index++) {
        var lang = langs[index];
        var headerLang = lang[0];

        if (SUPPORT_LANGUAGE.indexOf(headerLang) != -1) {
          locale = headerLang;
          break;
        }
      }
    }

    if (locale == undefined) {
      locale = 'en';
    }

    return NextResponse.redirect(
      new URL(
        `/${locale}${req.nextUrl.pathname}${req.nextUrl.search}`,
        req.url,
      ),
    );
  }
}

이 코드는 사용자의 request에서 사용자가 선호하는 언어를 나타내는 'NEXT_LOCALE' 쿠키를 확인한다. 쿠키가 없는 경우, 코드는 request의 Accept-Language 헤더를 확인하여 기본 언어를 확인한다.

그런 다음 코드는 지원되는 언어가 나열된 'SUPPORT_LANGUAGE' 배열을 확인하여 기본 설정 언어가 애플리케이션에서 지원되는지 확인한다. 기본 설정 언어가 지원되는 경우 해당 언어를 locale로 설정되고, 기본 설정 언어가 지원되지 않으면 로캘이 기본 언어인 en로 설정된다.

그 뒤 사용자를 해당 언어가 해당되는 페이지로 리다이렉트 시킨다.

Next.js 미들웨어 사용의 이점

Next.js 미들웨어는 Next.js 애플리케이션에 사용자 지정 기능을 추가하려는 개발자를 위한 필수 도구이다. 인증을 설정하든, 헤더를 구문 분석하든, 국제화를 처리하든 유연하고 확장 가능한 방법으로 Next.js 애플리케이션에 사용자 지정 기능을 추가할 수 있다.