接下来js如何定义好_app.js和layout.tsx文件

Question

我正在使用next js在本地开发一个应用程序，我不知道如何区分layout.tsx文件和_app.js文件，目前我在两者中都有非常相似的内容。

_app.js 和 Layout.tsx 之间的主要区别在于 _app.js 用于必须出现在所有页面上的全局元素，而 Layout.tsx 用于定义页面或页面组的特定布局。您可以根据应用程序的需要组合这两个选项，以实现连贯的结构和设计。

_app.js代码

// pages/_app.js
import React from 'react';
import '../styles/globals.css';
import Footer from '../components/template/Footer';
import Header from "../components/template/Header";

function MyApp({ Component, pageProps }) {
    return (
        <>

            <link
                href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@100&family=Lato:ital,wght@0,700;1,400&family=Roboto&display=swap"
                rel="stylesheet"
            />

            <Header />
            <Component {...pageProps} />
            <Footer />
        </>
    );
}

export default MyApp;

Layout.tsx 代码

import React from 'react';
import Footer from "@/app/components/template/Footer";
import Header from "@/app/components/template/Header";
import './globals.css';

const RootLayout = ({ children }: { children: React.ReactNode }) => {
    return (
        <>
            <link
                href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@100&family=Lato:ital,wght@0,700;1,400&family=Roboto&display=swap"
                rel="stylesheet"
            />
            <Header />
            <main className="mx-auto lg:max-w-screen-2xl md:max-w-90 md:m-1/4 lg:m-1/4 bg-transparent md:bg-gray-100 lg:bg-gray-100">
                {children}
            </main>
            <Footer />
        </>
    );
}

export default RootLayout;

示例组件，然后在我的所有组件中我用 标签

包裹它们

import '../app/styles/globals.css';
import React, {useEffect, useState} from 'react';
import RootLayout from "@/app/layout";
import {Brand} from '@/app/types/types';

const MarcasPage = () => {
    const [brands, setBrands] = useState<Brand[]>([]);
    const [dataLoaded, setDataLoaded] = useState(false);
    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
    const backURL = process.env.NEXT_PUBLIC_BACKEND;


    return (
        <RootLayout>
            <Breadcrumbs items={items}/>
            <div className="lg:ml-20 md:ml-20 lg:mr-20 lg:ml-20 ml-1 mr-1 ">
                <SearchCars />
            </div>
            <div className="py-8 px-2 md:px-10 lg:px-10 md:mx-10 lg:mx-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4">
                {brands.map((brand) => (
                    <div>
                          ......
                    </div>
                ))}
            </div>
        </RootLayout>
    );
};

export default HomePage;

所以我不知道应该如何很好地编程，最好的选择是什么，你建议如何做？

搜索谷歌和其他平台。

Answer 1

我想以评论的形式回答，但字数限制不够。

注意：我的答案是基于您给定的包含 _app.js 文件的代码。新的 Nextjs 版本有所不同，它有一个处理路由和组件的应用程序文件夹、处理布局的layout.js 文件、显示“嘿，我是一个页面，需要一条路由”的 page.js 文件。

现在让我描述一下_app.tsx和layout.tsx之间的区别：

_app.tsx

_app.tsx 用于所有页面上的全局且一致的元素。在这里，您应该拥有适用于所有页面的全局元素和逻辑。这可能包括您的字体导入和某些布局元素（例如页眉和页脚），前提是您希望它们无一例外地出现在每个页面上。

function MyApp({ Component, pageProps }) {
    return (
        <>
            <link 
               href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@100&family=Lato:ital,wght@0,700;1,400&family=Roboto&display=swap" 
               rel="stylesheet" 
            />
            <Header />
            <Component {...pageProps} />
            <Footer />
        </>
    );
}

export default MyApp;

布局.tsx

Layout.tsx 应该处理可能特定于一组页面但不一定是全局的布局。在这里您可以采用更加模块化的方法。

例如，如果您有一组需要侧边栏的页面，您可以在此处定义该布局。如果页面或页面组之间的主要内容区域有所不同，它也是定义主要内容区域的好地方。

const RootLayout = ({ children }: { children: React.ReactNode }) => {
    return (
        <>
            <main className="...">
                {children}
            </main>
        </>
    );
};
export default RootLayout;

页数

您的实际页面组件可以只关注内容和逻辑，而不必过多担心布局细节。例如，您可以用 rooter 包装它们，就像它们需要特定于页面的布局一样。

毕竟我建议您使用 Nextjs 最新版本及其应用程序路线，它可以为您提供有关这些的架构愿景。例如，现在有一个 template.js 文件，它的行为就像具有“key”属性的布局。这意味着它将在不同的页面中重新呈现。这对于某些用例很有帮助，例如“记住具有相同布局的每个页面的滚动位置”