Next.js 14中loading.js如何仅显示加载指示器，不渲染Navbar和Footer？

要实现加载时仅显示加载指示器、不展示Navbar和Footer的需求，核心思路是拆分布局层级，让根布局只负责最基础的页面结构，将Navbar和Footer移到单独的布局组件中，仅在实际页面内容加载完成后渲染。

具体修改步骤： #

1. 修改根布局（layout.js）
   移除Navbar和Footer，只保留最基础的html和body结构：

import "./globals.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

2. 创建新的主布局组件
   在app目录下新建MainLayout.js（命名可自定义），将Navbar和Footer放在这个组件里：

import Navbar from "@/components/nav-bar";
import Footer from "@/components/Footer";

export default function MainLayout({ children }) {
  return (
    <>
      <Navbar />
      {children}
      <Footer />
    </>
  );
}

3. 在实际页面中使用主布局
   打开你的页面组件（比如page.js），用MainLayout包裹页面内容：

import MainLayout from "./MainLayout";

// 假设这里有异步数据获取逻辑
async function fetchData() {
  const res = await fetch("你的API地址");
  return res.json();
}

export default async function Page() {
  const data = await fetchData();
  return (
    <MainLayout>
      {/* 这里放你的页面内容，比如渲染获取到的data */}
      <div>页面内容</div>
    </MainLayout>
  );
}

效果说明： #

• 页面加载状态下，Next.js会渲染loading.js，此时它直接被根布局包裹，不会加载MainLayout里的Navbar和Footer，仅显示加载指示器。
• 数据加载完成、页面内容渲染时，MainLayout会被加载，Navbar和Footer随之显示。

这种方案不需要将任何组件改为客户端组件，完全符合需求。

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