Next.js 14路由链接问题：如何跳转至components下的Login页面？

我正在使用Next.js 14，遇到了路由链接规则的问题。查阅文档后没找到跨文件夹页面跳转的相关说明，想点击首页page.tsx里的「Get started」链接，跳转到components/login目录下的page.tsx页面。下面是我的项目结构和代码，请问必须修改文件夹结构才能实现吗？

项目结构 #

app
| -- components
  |---login
    |----page.tsx
page.tsx

首页page.tsx代码 #

import Link from 'next/link';
import Image from 'next/image';

export default function Home() {
  return (
    <main className="flex min-h-screen">
      <div className="relative w-1/2">
        <Image
          src="/logo.png"
          alt="SIMS Logo"
          fill
          priority
          className="object-cover"
        />
      </div>

      <div className="w-1/2 flex flex-col items-center justify-center bg-gray-50 p-6">
        <h1 className="text-4xl font-bold mb-4">Welcome to SIMS</h1>
        <p className="text-xl text-gray-600 mb-8">Manage Your Materials, Master Your Lessons</p>
        <Link 
        href = "/Login"
        className="px-6 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors"
        >
          Get started
        </Link>
      </div>
    </main>
  );
}

Login页面page.tsx代码 #

import React from 'react';
import RoleButton from '../RoleButton/rolebutton';

export default function Login() {
    return (
        <div className="min-h-screen flex flex-col items-center justify-center">
            <div className="max-w-md w-full mx-auto px-4"> {/* Changed from max-w-2xl to max-w-md */}
                <h1 className="text-3xl font-bold text-gray-800 sm:text-5xl mb-8 text-center">
                    Select Your Role
                </h1> 
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 max-w-lg mx-auto"> {/* Changed gap-4 to gap-2 and max-w-3xl to max-w-lg */}
                    <RoleButton role="admin" title="Admin" />
                    <RoleButton role="stock_manager" title="Stock Manager" />
                    <RoleButton role="teacher" title="Teacher" />
                </div>
            </div>
        </div>
    );
}

首先明确：Next.js 14的App Router规则里，只有app目录下直接嵌套的文件夹（以及内部的page.tsx）才会被识别为可访问的路由页面。你现在把login/page.tsx放在components文件夹里，这个位置不属于路由目录，所以根本无法通过/Login或其他路径直接访问。

给你两种解决方式：

方案一：调整文件夹结构（推荐，符合框架规范） #

把login文件夹从components移动到app目录下，调整后的结构如下：

app
| -- components
| -- login
|    |----page.tsx
page.tsx

调整后，/login路径会自动映射到app/login/page.tsx。同时要修改首页Link的href为"/login"（注意Next.js路由是大小写敏感的，之前的/Login要改成全小写）。

这种方式完全符合Next.js的设计逻辑——components文件夹本来就是用来存放可复用组件的，路由页面应该放在app目录的直接子文件夹下，这样后续维护路由时不会混乱。

方案二：保持现有结构，通过中转页面实现（不推荐） #

如果实在不想改结构，可以在app目录下新建login/page.tsx，然后在这个文件里导入components/login/page.tsx的Login组件进行渲染：

// app/login/page.tsx
import Login from '@/app/components/login/page';

export default function LoginPage() {
  return <Login />;
}

同样需要把首页Link的href改成"/login"。不过这种方式相当于绕了个圈子，不符合框架的路由设计意图，不建议长期使用。

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