I am developing an app locally with next js and I don't know how to differentiate the layout.tsx file from the _app.js file, currently I have very similar content in both.

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

The main difference between _app.js and Layout.tsx is that _app.js is used for global elements that must be present on all pages, while Layout.tsx is used to define specific layouts for pages or groups of pages. You can combine both options according to the needs of your application to achieve a coherent structure and design.

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

_app.js code

_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 code

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;

Example component, Then in all my components I wrap them with the <RootLayout> tag

示例组件，然后在我的所有组件中，我用 标记将它们包装起来

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;

So I don't know how I should program this well, what is the best option, how do you recommend doing it?

所以我不知道我应该怎么编程才好，什么是最好的选择，你推荐怎么做？

Search into google and others platforms.

搜索谷歌和其他平台。

I wanted to answer as comment but the character limit is not enough.

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

Note: My answer is based on your given code that has _app.js files. New Nextjs version is different and it has an app folder that handles routes and components, layout.js files that handles layout, page.js files that say "hey, I am a page and need a route".

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

Let me descriibe the difference between _app.tsx and layout.tsx now:

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

_app.tsx

_app.tsx

_app.tsx is for global and consistent elements across all pages. Here you should have elements and logic that apply globally across all pages. This could include your font imports and certain layout elements like headers and footers, provided you want them to appear on every single page without exception.

_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;

Layout.tsx

Layout.tsx

Layout.tsx should handle layouts that could be specific to a group of pages but not necessarily global. Here you can have a more modular approach.

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

For example, if you have a set of pages that require a sidebar, you would define that layout here. It's also a good place to define your main content area if it differs between pages or page groups.

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

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

Pages

书页

Your actual page components can then just focus on content and logic, without worrying too much about layout specifics. For example you can wrap them with a rooter like if they require a page-specific layout.

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

After all I advice you to use Nextjs latest version and its app route that gives you an architectural vision about these. For example there is a template.js file now and it behaves like a layout with "key" property. That means it will re-render in different pages. That can be helpful for some use cases such as "remembering scroll position for each page that has the same layout"

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