NextJS 14布局中身份验证异常及localStorage报错问题

核心问题拆解 #

1. 布局范围错误：根布局直接引入了(dashboard)分组内的AppLayout，导致所有页面（包括/auth/login）都被该布局包裹，触发无限重定向循环。
2. localStorage访问时机错误：在组件顶层直接调用localStorage.getItem，即使加了'use client'，Next.js 14的客户端组件在初始服务器端渲染阶段仍会执行这段代码，而服务器环境没有localStorage，导致报错。
3. 重定向逻辑缺陷：未判断当前页面路径，无token时直接重定向到/auth/login，但该页面又被AppLayout包裹，形成循环。

解决方案步骤 #

1. 修正布局层级

根布局不要引入(dashboard)的布局，让分组内的布局仅作用于仪表板页面：
修改app/layout.js：

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${inter.className} w-full`}>
        {children} {/* 直接渲染子内容，不再包裹AppLayout */}
      </body>
    </html>
  )
}

将原app/(dashboard)/AppLayout.js重命名为app/(dashboard)/layout.js（Next.js路由分组的布局文件默认命名为layout.js，会自动应用给分组内所有页面）。

2. 修复localStorage访问与重定向逻辑

修改app/(dashboard)/layout.js：

'use client';

import { redirect, usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function DashboardLayout({ children }) {
  const [token, setToken] = useState(null);
  const pathname = usePathname();

  useEffect(() => {
    // 在客户端环境下获取token
    const storedToken = localStorage.getItem('token');
    setToken(storedToken);

    // 避免重定向循环：如果当前已经是登录页，不执行重定向
    if (!storedToken && pathname !== '/auth/login') {
      redirect('/auth/login');
    }
  }, [pathname])

  // 未获取到token前可以显示加载状态
  if (token === null) {
    return <div>加载中...</div>;
  }

  return (
    <div className='flex-1'>
      {children}
    </div>
  )
}

3. 确保登录页不受仪表板布局影响

app/auth/login/page.js保持不变，因为它不在(dashboard)分组内，只会使用根布局，不会被DashboardLayout包裹：

export default function LoginPage() {
  return (
    <div className="flex items-center justify-center h-screen">
      <h1>登录页面</h1>
      {/* 这里添加登录表单逻辑 */}
    </div>
  )
}

关键说明 #

• 布局作用范围：Next.js路由分组内的layout.js仅对分组内的页面生效，/auth/login属于根路由下的auth子路由，不会受到(dashboard)布局的影响，彻底解决重定向循环问题。
• localStorage访问时机：将localStorage的操作放在useEffect内，确保只在客户端渲染阶段执行，避免服务器端报错。
• 重定向循环防护：通过usePathname获取当前路径，判断是否已经在登录页，避免重复重定向。

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