์ž‘๊ฐ€:
    ์ƒ์„ฑ:2026-06-13๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ:2026-09-27

    @intlayer/next-i18next: next-i18next ํ˜ธํ™˜ ์–ด๋Œ‘ํ„ฐ

    ์™„์ „ํ•˜๊ณ  ์ƒ์„ธํ•œ ๋‹จ๊ณ„๋ณ„ ํŠœํ† ๋ฆฌ์–ผ์„ ๋ณด๋ ค๋ฉด ์ „์ฒด next-i18next ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๊ฐ€์ด๋“œ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

    Intlayer๋Š” ๋ชจ๋“  Next.js Pages Router ๋ฐ App Router ๊ตฌํ˜„์„ ํˆฌ๋ช…ํ•˜๊ฒŒ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. adapter๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ๋ฅผ ์ „ํ˜€ ๋‹ค์‹œ ์ž‘์„ฑํ•˜์ง€ ์•Š๊ณ  next-i18next ๊ตฌํ˜„์„ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ํ•ด์•ผ ํ•  ์ผ

    ์‹œ์ž‘ํ•˜๋ ค๋ฉด ๋‹ค์Œ์„ ์‹คํ–‰ํ•˜์„ธ์š”:

    bash
    npx intlayer init --interactive
    

    ํ•„์š”ํ•œ Intlayer ์„ค์ • ํŒŒ์ผ์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ Intlayer๋กœ ๋ณ€๊ฒฝํ•˜๋ ค๋ฉด next.config.ts๋ฅผ ์—…๋ฐ์ดํŠธํ•˜์„ธ์š”:

    next.config.ts
    import type { NextConfig } from "next";
    import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
    
    const withIntlayer = createNextI18nPlugin();
    
    const nextConfig: NextConfig = {};
    
    export default withIntlayer(nextConfig);
    

    ๋‚ด๋ถ€์ ์œผ๋กœ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€

    createNextI18nPlugin์€ Next.js์˜ ๋„ค์ดํ‹ฐ๋ธŒ ๋™์ž‘๊ณผ core next-intlayer plugin์„ ๊ตฌ์„ฑํ•˜์—ฌ next-i18next, react-i18next, i18next์— ๋Œ€ํ•œ ๋ชจ๋“  ํ•„์š”ํ•œ Webpack/Turbopack aliases๋ฅผ ์ฃผ์ž…ํ•ฉ๋‹ˆ๋‹ค.

    ๋‚ด๋ถ€์ ์œผ๋กœ:

    • serverSideTranslations & appWithTranslation: ์ด์ œ Intlayer์˜ ๋‚ด๋ถ€ loaders๋ฅผ ์œ„ํ•œ wrapper ํ•จ์ˆ˜๋กœ ์ž‘๋™ํ•˜์—ฌ ๋Œ€๊ทœ๋ชจ ์ •์  JSON injection์„ ์šฐํšŒํ•ฉ๋‹ˆ๋‹ค.
    • Client hooks: ์ฆ‰์‹œ @intlayer/react-i18next๋กœ ์œ„์ž„ํ•˜์—ฌ ๋ชจ๋“  formatting, plurals, nested namespace ๊ธฐ๋Šฅ์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค.
    ์ด๋Ÿฌํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์–ด๋””์—์„œ ์™”๋Š”์ง€ ์ดํ•ดํ•˜๋ ค๋ฉด JavaScript i18n์˜ ์—ญ์‚ฌ๋ฅผ ์ฝ์–ด๋ณด์„ธ์š”.