在 next.js应用中，_app.js文件承载着全局性的配置和组件，任何置于其中的内容都会在所有页面上渲染。本文旨在解决将特定页面组件（如多步表单）错误地放置在_app.js 中导致其在所有 url 上显示的问题。我们将详细介绍如何利用 next.js 的文件系统 路由 机制，将页面特定组件正确地集成到对应的页面文件中，并结合可复用的布局组件，实现精确的条件渲染，确保组件仅在目标 url 上按预期显示，同时保持_app.js 的简洁高效。
理解_app.js 的职责与局限性
Next.js 的_app.js 文件是应用程序的入口点，它负责初始化所有页面。这意味着，任何直接放置在_app.js 组件的 render 方法中的内容，都将作为所有页面的父组件而存在，并随之在整个应用程序的每个 路由 上渲染。这对于全局样式、状态管理（如sessionProvider）、布局组件或加载指示器等场景非常有用。然而，对于特定页面的内容（如一个多步表单 StepContext），将其置于_app.js 会导致其在每个 URL 上不必要地显示，从而违背了页面内容的独立性原则。
利用 Next.js 文件系统路由实现页面特定渲染
Next.js 的核心优势之一是其基于文件系统的路由。在 pages（或 App router中的 app）目录下创建的文件会自动映射到相应的 URL 路径。这是实现页面特定内容渲染的关键。
1. 移除_app.js 中的页面特定组件
首先，应将所有不应在全局范围内渲染的组件（例如示例中的 StepContext）从_app.js 中移除。_app.js 应该保持尽可能地精简，只包含应用程序级别的设置和全局包裹器。
清理后的_app.js 示例：
// pages/_app.js import react from "react"; import App from "next/app"; import Head from "next/head"; import Router from "next/router"; import {SessionProvider} from "next-auth/react"; import PageChange from "components/PageChange/PageChange.js"; // 假设这是全局加载指示器 import "@fortawesome/fontawesome-free/css/all.min.css"; import "styles/tailwind.css"; // 全局路由加载动画 Router.events.on("routeChangeStart", (url) => {console.log(`Loading: ${url}`); document.body.classlist.add("body-page-transition"); // ReactDOM.render() 在 React 18 中已不推荐用于此场景，可使用 Portals 或 css 动画 替代 // 仅为演示目的保留 // ReactDOM.render(// <PageChange path={url} />, // document.getElementById("page-transition") // ); }); Router.events.on("routeChangeComplete", () => {// ReactDOM.unmountComponentAtnode() 同上 // ReactDOM.unmountComponentAtNode(document.getElementById("page-transition")); document.body.classList.remove("body-page-transition"); }); Router.events.on("routeChangeError", () => {// ReactDOM.unmountComponentAtNode() 同上 // ReactDOM.unmountComponentAtNode(document.getElementById("page-transition")); document.body.classList.remove("body-page-transition"); }); export default class MyApp extends App {static async getInitialProps({ Component, router, ctx}) {let pageProps = {}; if (Component.getInitialProps) {pageProps = await Component.getInitialProps(ctx); } return {pageProps}; } render() { const { Component, pageProps, session} = this.props; // 默认布局，如果页面没有定义自己的布局，则使用这个 const Layout = Component.layout || (({children}) => <>{children}</>); return (<SessionProvider session={session}> {/* 全局 SessionProvider */} <React.Fragment> <Head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> {/* 全局标题，可被页面级 Head 覆盖 */} <title>Futur Banking</title> </Head> <Layout> <Component {……pageProps} /> </Layout> </React.Fragment> </SessionProvider> ); } }2. 在特定页面文件中集成组件
将 StepContext 组件导入并渲染到需要它的具体页面文件（例如 pages/quiz.js）中。
文件结构示例：
/my-app ├── pages/ │ ├── _app.js │ ├── index.js │ └── quiz.js // 此文件对应 /quiz 路由 └── components/ └── StepContext.js └── Layout.jspages/quiz.js 示例：
// pages/quiz.js import StepContext from '../components/StepContext'; // 导入多步表单组件 import Layout from '../components/Layout'; // 导入布局组件 export default function Quiz() { return ( <Layout title="Quiz | Futur Banking"> {/* 使用布局组件并传递页面标题 */} <StepContext /> {/* 在这里渲染多步表单，它将只在 /quiz 路由下显示 */} </Layout> ); }3. 创建可复用的布局组件
为了在不同页面间保持一致的结构和样式，可以创建一个独立的布局组件。这个布局组件可以接受 children 作为其内容，并允许通过 props 动态设置页面标题等信息。
components/Layout.js 示例：
// components/Layout.js import Head from 'next/head'; import React from 'react'; // 定义 Props 类型，如果使用typescript // interface LayoutProps {// children: React.ReactNode; // title?: string; //} const Layout = ({children, title = "Futur Banking"}) => {return ( <> <Head> <title>{title}</title> {/* 其他页面特定的 meta 标签或链接 */} </Head> <main> {children} {/* 页面内容将在此处渲染 */} </main> {/* 可以在这里添加页脚、导航栏等 */} </> ); }; export default Layout;通过上述方法，StepContext 组件将只会在访问 localhost:3000/quiz（或您的部署域名下的 /quiz）时渲染，完美解决了组件在所有页面上显示的问题。
进阶：App Router (Next.js 13+)
对于 Next.js 13 及更高版本，引入了 App Router，它提供了更灵活、更强大的路由和布局管理方式。App Router 使用文件约定来定义路由段和特殊的 layout.js、page.js 文件来构建 UI。
在 App Router 中，您会将 StepContext 直接放置在对应路由段的 page.js 文件中，而布局则通过 layout.js 文件来定义，并自动应用于该路由段及其子路由。
推荐查阅 Next.js 官方文档以获取 App Router 的详细信息：
总结
核心原则是：_app.js 用于全局配置和包裹器，而页面特定的内容和组件应放置在 pages 目录下的对应路由文件中。通过合理利用 Next.js 的文件系统路由和可复用的布局组件，我们可以精确控制组件的渲染位置，确保应用程序的结构清晰、性能优化，并提供更好的用户体验。避免在_app.js 中直接渲染页面特定内容是构建高效 Next.js 应用的关键一步。
