NextJS：能否在不使用子路径路由的情况下实现i18n语言检测？

当然可以实现——只要放弃Next.js官方自带的i18n路由配置，转而自己实现语言检测逻辑，就能保持路由干净（比如/blog而非/es/blog），同时在getServerSideProps中获取到语言区域。

下面是两种可行的实现方案：

方案一：直接在getServerSideProps中检测语言 #

1. 先删除next.config.js中的i18n配置项，避免官方路由自动添加语言前缀。
2. 在页面的getServerSideProps里，从请求的Cookie或Accept-Language请求头中提取用户的语言偏好：

   export async function getServerSideProps(context) {
     // 优先取用户之前选择并存在Cookie里的语言
     const savedLocale = context.req.cookies?.locale;
     // 解析浏览器发送的Accept-Language头
     const acceptLanguage = context.req.headers['accept-language'];
     // 检测语言，默认 fallback 到英文
     const detectedLocale = savedLocale || (acceptLanguage ? acceptLanguage.split(',')[0].split('-')[0] : 'en');
     // 确保检测到的语言在你支持的列表内
     const supportedLocales = ['en', 'es'];
     const locale = supportedLocales.includes(detectedLocale) ? detectedLocale : 'en';
   
     // 将语言信息传递给页面组件
     return {
       props: { locale }
     };
   }
   

3. 若需要支持用户手动切换语言，只需做一个切换按钮，点击时用js-cookie之类的库设置locale Cookie，再刷新页面即可——下次请求时getServerSideProps就能拿到新的语言值。

方案二：用中间件统一处理语言检测 #

如果多个页面都需要获取语言信息，用中间件统一处理更高效：

1. 新建middleware.ts（或.js）文件，在中间件层面完成语言检测并设置Cookie/请求头：

   import { NextResponse } from 'next/server';
   import type { NextRequest } from 'next/server';
   
   const supportedLocales = ['en', 'es'];
   
   export function middleware(request: NextRequest) {
     const savedLocale = request.cookies.get('locale')?.value;
     const acceptLanguage = request.headers.get('accept-language');
     let locale = savedLocale;
   
     // 未保存语言时，解析Accept-Language头
     if (!locale && acceptLanguage) {
       const detected = acceptLanguage.split(',')[0].split('-')[0];
       locale = supportedLocales.includes(detected) ? detected : 'en';
     }
   
     // 默认语言兜底
     if (!locale) {
       locale = 'en';
     }
   
     // 设置Cookie，持久化用户语言偏好
     const response = NextResponse.next();
     response.cookies.set('locale', locale);
     // 将语言信息写入请求头，方便后续getServerSideProps读取
     response.headers.set('x-locale', locale);
   
     return response;
   }
   

2. 在任意页面的getServerSideProps中，直接从请求头或Cookie读取语言：

   export async function getServerSideProps(context) {
     const locale = context.req.headers['x-locale'] || context.req.cookies.locale || 'en';
     return {
       props: { locale }
     };
   }
   

注意事项 #

• 放弃官方i18n路由后，多语言内容的加载需要自己实现，比如用react-i18next框架，或者根据locale值动态导入对应的语言文件。
• 这种方案仅适用于服务端渲染（SSR）或静态生成（SSG）中需要动态获取语言的场景——如果是纯静态预渲染页面，getStaticProps无法获取请求上下文，此时只能在客户端完成语言检测和内容切换。

内容的提问来源于stack exchange，提问作者Prudent