1
// middleware.ts
2
import createMiddleware from "next-intl/middleware";
3
import { routing } from "./i18n/routing";
4
import NextAuth from "next-auth";
5
import authConfig from "./lib/auth.config";
6
import { protectedPaths, publicPaths } from "./lib/db/data/routes-data";
7
import { NextResponse } from "next/server";
8
import { isMatch } from "./lib/utils";
9

10

11
/* 다국어 미들웨어 생성(routing 객체 전달, createMiddleware 함수 사용)
12
 * =========================================
13
 * [Pre-A] next-intl / next-auth 설정
14
 * ========================================= */
15
const intlMiddleware = createMiddleware(routing);
16

17

18
// nextAuth 인증 미들웨어 래퍼
19
const { auth } = NextAuth(authConfig);
20

21
/* ####### MIDDLEWARE FUNCTION #######
22
 * =========================================
23
 * MAIN MIDDLEWARE
24
 * ========================================= */
25
export default auth((req) => {
26
  // [Step A] next-intl 미들웨어 (rewrite/locale 설정 등) 먼저 실행
27
  const { pathname } = req.nextUrl;
28

29
  const locales = routing.locales;
30
  const defaultLocale = routing.defaultLocale;
31
  /* URL PREFIX 추출
32
   * =============================
33
   * [Step A] URL에서 prefix 를 추출한다.
34
   *   - locales: 언어 목록
35
   *   - defaultLocale: 기본 언어
36
   *  ============================= */
37
  const pathnameParts = pathname.split("/").filter(Boolean); // 빈 문자열 제거
38
  const prefix = pathnameParts[0] || "";
39
  const pathnameSegments = req.nextUrl.pathname.split("/");
40

41
  console.log("[middleware - Step B] pathname comes: ", pathname);
42
  console.log("[middleware - Step B] prefix extracted: ", pathnameParts);
43
  console.log("[middleware - Step B] pathnameSegments: ", pathnameSegments);
44

45
  /* LANGUAGE SETTINGS
46
   * =============================
47
   * [Step B] 현재 URL 에서 locale을 감지한다.
48
   *   - urlLocale : URL에서 추출한 언어(prefix)
49
   *   - userLocale: 쿠키에서 추출한 언어
50
   *   - currentLocale: URL에서 추출한 언어(prefix) -> 쿠키 -> 기본 언어 순서
51
   *  ============================= */
52
  const urlLocale = locales.includes(prefix as "ko" | "en" | "vn") ? prefix : null;
53
  const userLocale = req.cookies.get("NEXT_LOCALE")?.value;
54
  const currentLocale = userLocale || defaultLocale;
55

56
  console.log(
57
    "[middleware - Step C]: ",
58
    "[urlLocale]: ",
59
    urlLocale,
60
    "[userLocale]: ",
61
    userLocale,
62
    "[currentLocale]: ",
63
    currentLocale,
64
  );
65

66
  /* PATH CHECK
67
   * =============================
68
   * [Step C] 공개/비공개 경로 확인
69
   *   - pathWithoutPrefix: prefix를 제거한 경로
70
   *   - isPublicRoute: 요청된 경로가 공개 경로인지 확인
71
   * ============================= */
72

73
  const pathWithoutPrefix = `/${pathnameParts.slice(1).join("/")}` || "/";
74
  const isPublicRoute = isMatch(pathWithoutPrefix, publicPaths);
75
  const isProtectedRoute = isMatch(pathWithoutPrefix, protectedPaths);
76
  console.log("[middleware - Step D] pathWithoutPrefix: ", pathWithoutPrefix);
77
  console.log("[middleware - Step D] isPublicRoute: ", isPublicRoute);
78
  console.log("[middleware - Step D] isProtectedRoute: ", isProtectedRoute);
79

80
  // 모든 경로에 대해 intlMiddleware 실행(잘못된 경로는 외부처리)
81
  let response = NextResponse.next(); // 기본 응답 생성
82

83
  /* COOKIE SETTINGS
84
   * =============================
85
   * [Step D] NEXT_LOCALE 쿠키 설정
86
   *   - 조건에 따라 쿠키를 설정한다.
87
   *   - a). NEXT_LOCALE 쿠키를 가져오지 못한 경우
88
   *   - b). NEXT_LOCALE 쿠키가 있지만, 현재 언어(currentLocale)와 다른 경우
89
   *  ============================= */
90
  if (!req.cookies.get("NEXT_LOCALE") || req.cookies.get("NEXT_LOCALE")?.value !== currentLocale) {
91
    response.cookies.set("NEXT_LOCALE", currentLocale, {
92
      path: "/",
93
      maxAge: 60 * 60 * 24 * 30, // 30 days
94
      secure: process.env.NODE_ENV === "production", // VERCEL HTTPS support
95
    });
96
    console.log("[middleware - Step D] NEXT_LOCALE cookie set early: ", currentLocale);
97
  }
98

99
  // 공개 경로 처리
100
  if (isPublicRoute) {
101
    return intlMiddleware(req);
102
  }
103

104
  // 비공개 경로 처리
105
  if (isProtectedRoute) {
106
    if (!req.auth) {
107
      const loginUrl = new URL(`/login?callbackUrl=${encodeURIComponent(pathname)}`, req.nextUrl.origin);
108

109
      return NextResponse.redirect(loginUrl);
110
    }
111
  }
112

113
  // console.log("[middleware - Step D] NEXT_LOCALE cookie set: ", currentLocale);
114

115
  // console.log("[middleware - Final] Response locale: ", currentLocale);
116
  response = intlMiddleware(req);
117

118
  return response;
119
});
120

121
/* =========================================
122
 * next.js 미들웨어 설정
123
 * ========================================= */
124
export const config = {
125
  // matcher: ["/((?!api|_next/static|_next/image|favicon.ico|.*\\..*).*)"],
126
  // matcher: ["/", "/(ko|en|vn)/:path*"],
127
  // matcher: ["/((?!api|_next|.*\\..*).*)"],
128
  matcher: ["/((?!api|image|_next|favicon.ico|_next/image|icons|_next/static|_vercel\\..*).*)"],
129
};

1
// components/shared/header/language-switcher.tsx
2

3
"use client";
4

5
import * as React from "react";
6
import {
7
  DropdownMenu,
8
  DropdownMenuContent,
9
  DropdownMenuLabel,
10
  DropdownMenuRadioGroup,
11
  DropdownMenuRadioItem,
12
  DropdownMenuTrigger,
13
} from "@/components/ui/dropdown-menu";
14
import { i18n } from "@/i18n-config";
15
import { Link, usePathname } from "@/i18n/routing";
16
import { useLocale } from "next-intl";
17
import Image from "next/image";
18

19
/**
20
 * 브라우저에서 NEXT_LOCALE 쿠키를 세팅하는 함수
21
 * - maxAge: 1년 (필요하면 조정)
22
 * - Secure: HTTPS 환경에서만 전송 (Vercel이라면 보통 자동 HTTPS)
23
 * - SameSite=Lax
24
 */
25

26
export function cleanPathname(pathname: string, locale: string) {
27
  const localePrefix = `/${locale}`;
28

29
  return pathname.startsWith(localePrefix) ? pathname.replace(localePrefix, "") || "/" : pathname;
30
}
31

32
export default function LanguageSwitcher() {
33
  const { locales } = i18n;
34
  const locale = useLocale();
35
  const pathname = usePathname();
36
  // console.log("[DEBUG] LanguageSwitcher - locale: ", locale);
37

38
  function setLocaleCookie(locale: string) {
39
    const maxAge = 60 * 60 * 24 * 365; // 1년
40
    document.cookie = `NEXT_LOCALE=${locale}; Path=/; Max-Age=${maxAge}; Secure; SameSite=Lax`;
41
  }
42

43
  return (
44
    <DropdownMenu>
45
      <DropdownMenuTrigger className="header-button h-16">
46
        <div className="flex items-center gap-1 text-base">
47
          <Image
48
            src={locales.find((l) => l.slug === locale)?.icon || locales[0].icon}
49
            alt={"language"}
50
            width={28}
51
            height={28}
52
          />
53
          {locale.toUpperCase().slice(0, 2)}
54
        </div>
55
      </DropdownMenuTrigger>
56
      <DropdownMenuContent className="w-40" align="center">
57
        <DropdownMenuLabel>Language</DropdownMenuLabel>
58
        <DropdownMenuRadioGroup value={locale}>
59
          {locales.map((c) => (
60
            // 현재 언어는 선택 불가능하게
61
            <DropdownMenuRadioItem key={c.name} value={c.slug} disabled={c.slug === locale}>
62
              {/* <div className="w-full flex items-center gap-2 text-sm">
63
               <Image src={c.icon} alt={c.name} width={28} height={28} />
64
               {c.name}
65
             </div> */}
66
              <Link
67
                href={pathname}
68
                locale={c.slug}
69
                className="w-full flex items-center gap-2 text-sm"
70
                onClick={() => {
71
                  setLocaleCookie(c.slug);
72
                }}>
73
                <Image src={c.icon} alt={c.name} width={28} height={28} />
74
                {c.name}
75
              </Link>
76
            </DropdownMenuRadioItem>
77
          ))}
78
        </DropdownMenuRadioGroup>
79
      </DropdownMenuContent>
80
    </DropdownMenu>
81
  );
82
}

1
// components/shared/header/index.tsx
2

3
import Link from "next/link";
4
import { buttonVariants } from "@/components/ui/button";
5
import { ThemeToggleButton } from "./theme-toggle-button";
6
import { SideSheet } from "./side-sheet";
7
import data from "@/lib/db/data/data";
8
import LanguageSwitcher from "./language-switcher";
9
import { useLocale } from "next-intl";
10

11
export default function Header() {
12
  const locale = useLocale();
13
  console.log("[DEBUG] Header - locale: ", locale);
14
  return (
15
    <header className="h-16 bg-background/40 sticky top-0 border-b px-8 backdrop-blur-sm flex items-center justify-between">
16
      {/* HEADER - 1: LOGO  */}
17
      <div className="flex items-center">
18
        <Link href={"/"}>
19
          <h1 className="font-bold text-lg md:text-xl text-nowrap">CCB Alliance</h1>
20
        </Link>
21
      </div>
22

23
      {/* HEADER -2: MENUS */}
24
      <div className="hidden md:flex w-full justify-end space-x-4 items-center">
25
        {data.headerMenus.map((menu) => (
26
          <Link key={menu.href} href={`${menu.href}`} className="text-base p-2">
27
            {menu.name}
28
          </Link>
29
        ))}
30
      </div>
31

32
      <div className="hidden md:flex justify-end w-40 px-2">
33
        {/* <LanguageSwitcher key={locale} /> */}
34
        <LanguageSwitcher />
35
      </div>
36
      {/* HEADER -3: LOGIN */}
37
      <div className="hidden md:flex items-center gap-2 px-2">
38
        <Link href={"/login"} className={buttonVariants({ variant: "outline" })}>
39
          Login
40
        </Link>
41
        <Link href={"/register"} className={buttonVariants({ variant: "outline" })}>
42
          Sign Up
43
        </Link>
44
      </div>
45
      <div className="w-fit flex gap-4 items-center">
46
        <div className="md:hidden flex justify-end w-40 ">
47
          <LanguageSwitcher />
48
        </div>
49
        <ThemeToggleButton />
50
        <SideSheet />
51
      </div>
52
    </header>
53
  );
54
}