迁移Next.js从Pages到App目录后全局CSS不生效问题

问题背景 #

将Next.js项目从Pages目录迁移到App目录，采用app/[locale]/layout.tsx的国际化目录结构（基于next-intl），根布局中导入了根目录styles/globals.scss全局样式文件，能在.next/static/css中看到生成的CSS，但样式完全不生效。移除next-intl配置，将layout.tsx直接放在app目录下后，全局CSS恢复正常。

解决方案 #

核心问题是错误地将国际化路由布局作为App Router的根布局，正确的做法是拆分根布局与国际化子布局，让全局样式在最顶层的根布局中加载。

1. 调整目录结构 #

确保目录层级如下：

app/
├── layout.tsx          # 全局根布局，导入全局样式
├── [locale]/
│   ├── layout.tsx      # 国际化子布局，处理locale逻辑
│   └── page.tsx

2. 编写全局根布局（app/layout.tsx） #

将全局样式导入移到这里，负责最基础的HTML结构：

import '@/styles/globals.scss';
import 'react-credit-cards-2/dist/es/styles-compiled.css';
import { Metadata } from 'next';

export const metadata: Metadata = {
  icons: [{ rel: 'apple-touch-icon', url: '/icons/icon.png' }],
  manifest: '/manifest.json',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

3. 编写国际化子布局（app/[locale]/layout.tsx） #

在这里集成next-intl的国际化逻辑，包裹子页面：

import { AntdRegistry } from '@ant-design/nextjs-registry';
import { Providers } from './providers';
import { getMessages } from 'next-intl/server';
import { NextIntlClientProvider } from 'next-intl';

interface LocaleLayoutProps {
  children: React.ReactNode;
  params: { locale: string };
}

export default async function LocaleLayout({ children, params }: LocaleLayoutProps) {
  // 获取当前语言的国际化消息
  const messages = await getMessages({ locale: params.locale });

  return (
    <html lang={params.locale}>
      <body>
        <AntdRegistry>
          <NextIntlClientProvider locale={params.locale} messages={messages}>
            <Providers locale={params.locale}>{children}</Providers>
          </NextIntlClientProvider>
        </AntdRegistry>
      </body>
    </html>
  );
}

4. 确保next-intl配置正确 #

• next.config.js 配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'zh'], // 替换为你的支持语言
    defaultLocale: 'en',
  },
};

module.exports = nextConfig;

• middleware.ts 配置（用于路由重定向和locale检测）：

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'zh'],
  defaultLocale: 'en',
});

export const config = {
  matcher: ['/', '/(en|zh)/:path*'],
};

原理说明 #

App Router要求app/layout.tsx作为全局根布局，所有页面都会继承该布局的样式与上下文。如果直接将[locale]/layout.tsx作为根布局，Next.js的全局样式加载机制会失效——全局样式必须在最顶层的布局中导入，才能正确注入到所有页面的渲染流程中。next-intl的App Router方案正是基于这种层级结构设计，根布局负责基础环境，子布局处理国际化逻辑。

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