Next.js+TypeScript+Tailwind项目页面内容不显示求助

我用TypeScript和Tailwind CSS创建了一个Next.js项目，但遇到了页面内容不显示的问题：初始加载首页或点击首页时，仅能看到导航区域的内容，首页的标题、图片等都没展示；点击Dashboard时，同样只看到导航，Dashboard的内容也不出现。尝试过修改锚标签、调整Link导入等方法，都没解决。

相关文件代码 #

src/app/page.tsx #

import Button from "@/component/button";
import Image from "next/image";
import shadup from '../../public/a.jpg'
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24 gap-4 bg-gradient-to-b from-red-600 to-yellow-800">
    <div className="border-4 border-blue-700 text-3xl text-amber-500">Wandering Swordsman</div>
    <div>  
      <Image 
      src={shadup}
      width={300}
      height={250}
      alt={''}
      className="border-4 rounded-full border-grey-600">
      </Image>
      </div>
    <div className="font-bold  py-2 px-4 border-4 border-blue-700  bg-blue-50 rounded-full text-red-700">
      <Button href='https://muhammad-six.vercel.app/'>Main site</Button>
    </div>
    </main>
  );
}

src/app/dashboard/page.tsx #

import React from 'react'

const Dashboard = () => {
  return (
    <div>welcome to Dashboard route</div>
  )
}

export default Dashboard;

src/component/button.tsx #

import Link from 'next/link';

interface ButtonProps { 
  href: string;
  children: React.ReactNode;
}

function Button({ href, children }: ButtonProps) {
  return (
    <Link href={href} passHref>
      <div className="">
        {children}
      </div>
    </Link>
  );
}

export default Button;

src/app/layout.tsx #

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import link from "next/link";
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
      <header>
      <link href="/">Home</link>
      <link href="/dashboard">Dashboard</link>
      </header>     
      </body>
    </html>
  );
}

问题原因分析 #

核心问题出在src/app/layout.tsx中：

1. 未渲染页面内容：RootLayout组件接收了children参数，但在返回的JSX中没有将{children}渲染到页面里，导致Home、Dashboard等页面的内容完全无法展示。
2. 导航链接使用错误：导入的是小写的link（实际应该是Next.js的Link组件），并且使用了HTML原生的<link>标签来做导航，这不是Next.js的正确导航方式，原生<link>标签无法实现页面跳转，且显示异常。

修复方案 #

修改src/app/layout.tsx，修复导航链接并添加页面内容的渲染：

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
// 修复导入：使用大写的Link
import Link from "next/link";
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <header className="p-4 flex gap-4 bg-gray-100">
          {/* 使用Next.js的Link组件实现导航 */}
          <Link href="/">Home</Link>
          <Link href="/dashboard">Dashboard</Link>
        </header>
        {/* 添加children渲染，展示页面内容 */}
        {children}
      </body>
    </html>
  );
}

另外可以顺便优化两个小细节：

1. 在src/app/page.tsx中给Image添加有意义的alt属性，比如alt="Wandering Swordsman Image"，提升可访问性。
2. 在src/component/button.tsx的div上添加一些Tailwind样式，让按钮更美观，比如className="px-4 py-2 rounded-full hover:bg-blue-100 transition-colors"。

验证修复 #

修改后重启项目：

• 首页会正常显示标题、图片和按钮
• 点击Dashboard导航，会显示"welcome to Dashboard route"内容

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