如何将Login组件设为默认路由而非Home组件并实现无布局渲染

是否需要受保护路由？ #

当然需要。你的首页（/）是仅登录用户可访问的资源，未登录用户访问/时需自动跳转至登录页，这正是受保护路由的核心作用。而你要的“页面加载时优先渲染Login页面”，本质就是把首页设为受保护路由，未登录状态下强制跳转至登录页。

具体实现步骤 #

1. 让Login页面摆脱RootLayout的公共组件 #

Next.js 13+ App Router中，所有页面默认继承app/layout.js的布局。要让Login页不带Header、Sidebar和Footer，有两种简单实现方式：

• 方法一：给Login创建独立布局
  在app目录下新建login文件夹，里面创建layout.js和page.js。Login的布局仅返回子组件，完全不包含公共布局：

  // app/login/layout.js
  export default function LoginLayout({ children }) {
    return children;
  }
  

  然后在app/login/page.js中编写登录表单逻辑即可。
• 方法二：在RootLayout中判断路由排除Login页
  利用usePathname()钩子判断当前路径，若为/login则不渲染公共组件：

  // app/layout.js
  import { usePathname } from 'next/navigation';
  
  export default function RootLayout({ children }) {
    const pathname = usePathname();
    const isLoginPage = pathname === '/login';
  
    return (
      <html lang="zh-CN">
        <body>
          {!isLoginPage && (
            <>
              <Header />
              <Sidebar />
            </>
          )}
          {children}
          {!isLoginPage && <Footer />}
        </body>
      </html>
    );
  }
  

2. 给首页添加保护（未登录自动跳登录页） #

在app/page.js中加入登录状态校验，未登录时直接重定向到/login：

// app/page.js
import { redirect } from 'next/navigation';
import { getCurrentUser } from '@/lib/auth'; // 自定义的获取当前用户状态的工具函数

export default async function Home() {
  const user = await getCurrentUser();
  if (!user) {
    redirect('/login');
  }

  return (
    {/* 首页内容 */}
  );
}

这里用服务端组件校验更安全，避免前端逻辑被绕过，不推荐用客户端组件的useEffect做跳转。

3. 登录成功后重定向到首页 #

登录表单提交完成，处理完登录逻辑（比如存储用户token）后，直接重定向至/：

// app/login/page.js
import { redirect } from 'next/navigation';
import { signIn } from '@/lib/auth'; // 自定义的登录接口函数

export default function LoginPage() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const email = formData.get('email');
    const password = formData.get('password');

    const success = await signIn(email, password);
    if (success) {
      redirect('/');
    } else {
      // 处理登录失败逻辑，比如错误提示
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" required />
      <input type="password" name="password" required />
      <button type="submit">登录</button>
    </form>
  );
}

补充优化建议 #

• 已登录用户访问/login时，自动跳回首页：在login/page.js中同样加入登录状态校验，已登录则执行redirect('/')。
• 登录状态建议存储在HttpOnly Cookie中，比localStorage更安全，也更方便服务端做校验。

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