Next.js+TypeScript创建新页面遇阻：404错误及组件导入失败求助

问题根源 #

点击Men/Women/Teens出现404，核心原因是Next.js的页面路由依赖文件系统，不能把页面组件放在components文件夹，必须放在指定的路由目录下；同时导航栏的链接写法有误，导致客户端路由未生效。

一、创建正确的页面文件 #

根据你使用的Next.js版本，选择对应方式创建页面：

若使用App Router（Next.js 13+，你的代码里用了usePathname属于这个体系） #

在项目根目录的app文件夹下，分别创建以下目录和文件：

• app/Men/page.tsx
• app/Women/page.tsx
• app/Teens/page.tsx

以Men页面为例，page.tsx示例内容：

// app/Men/page.tsx
export default function MenPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-4">男装专区</h1>
      {/* 这里添加你的页面内容，比如商品列表、筛选器等 */}
      <p>这是男装页面的测试内容</p>
    </div>
  );
}

若使用Pages Router（Next.js 12及更早） #

在项目根目录的pages文件夹下，直接创建对应的tsx文件：

• pages/Men.tsx
• pages/Women.tsx
• pages/Teens.tsx

示例代码：

// pages/Men.tsx
import type { NextPage } from 'next';

const MenPage: NextPage = () => {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-4">男装专区</h1>
      <p>这是男装页面的测试内容</p>
    </div>
  );
};

export default MenPage;

二、修复导航栏的链接问题 #

你当前混用了原生<a>标签和lucide的Link组件，会导致客户端路由失效，需替换为Next.js官方的Link组件，修正后的代码如下：

"use client";
import { Button } from "@/components/ui/button";
import { ShoppingBag } from "lucide-react";
import { usePathname } from "next/navigation";
// 导入Next.js官方的Link组件
import Link from "next/link";

const links = [
  { name: 'Home', href: '/' },
  { name: 'Men', href: '/Men' },
  { name: 'Women', href: '/Women' },
  { name: 'Teens', href: '/Teens' },
];

export default function Navbar() {
  const pathname = usePathname();

  return (
    <header className="mb-8 border-b">
      <div className="flex items-center justify-between mx-auto max-w-2xl px-4 sm:px-6 lg:max-w-7xl">
        {/* 首页链接替换为Next.js的Link */}
        <Link href="/">
          <h1 className="text-2xl md:text-4xl font-bold">Next<span className="text-primary">Commerce</span></h1>
        </Link>
        <nav className="hidden gap-12 lg:flex 2xl:ml-16">
          {links.map((link, idx) => (
            <div key={idx}>
              <Link
                href={link.href}
                className={
                  pathname === link.href
                    ? "text-lg font-semibold text-primary"
                    : "text-lg font-semibold text-gray-600 transition duration-100 hover:text-primary"
                }
              >
                {link.name}
              </Link>
            </div>
          ))}
          {/* 移除重复的Men链接，循环已生成对应内容 */}
        </nav>
        <div className="flex divide-x border-r sm:border-l">
          <Button variant="outline" className="flex flex-col gap-y-1.5 h-12 w-12 sm:w-20 sm:h-20 md:h-24 md:w-24 rounded-none">
            <ShoppingBag/>
            <span className="hidden text-xs font-semibold text-gray-500 sm:block">
              Cart
            </span>
          </Button>
        </div>
      </div>
    </header>
  );
}

关键修正点： #

1. 所有跳转链接改用Next.js的Link组件，确保客户端路由无刷新跳转
2. 删除重复的Men链接，循环已生成对应导航项
3. 修正拼写错误：test-2xl→text-2xl、gapy-y-1.5→gap-y-1.5、x-auto→mx-auto

三、验证步骤 #

1. 重启Next.js开发服务器（路由变更有时需要重启才能识别）
2. 点击导航栏的Men/Women/Teens链接，应能正常跳转至对应页面，不再出现404
3. 可在每个页面文件中添加自定义内容，测试页面渲染是否正常

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