替代`pages/_app.js`在NextJS应用路由中的方式是什么?

huangapple go评论84阅读模式
英文:

What's the alternative to pages/_app.js in app router in NextJS?

问题

对于app router,您在NextJS中需要使用app.js文件来实现与pages/_app.jspage router中的相应功能。

英文:

I am just starting with NextJS and there is a new router called app router. Now I have some tutorials using pages/_app.js from the NextJS page router. So, what's the corresponding file for that in the app router?

答案1

得分: 1

app 文件夹内,每个文件夹代表一个路由段。第一个文件夹,即 app 本身,代表根路由段。

app/layout.js 现在将等同于新的 Next 13 应用目录中的 _app.js。因为它包装了整个应用程序的所有路由和子路由。

英文:

Inside app each folder represent a route segment. The very first folder i.e app itself represent the root route segment.

app/layout.js will now be the equivalent for _app.js in the new Next 13 app directory. Since, it is the one wrapping all route and sub routes of your whole app.

答案2

得分: 0

以下是您要翻译的内容:

在`app`目录中没有相应的文件。这是用于`pages/_app.js`的用途

- 设置全局状态
- 定义全局组件
- 将属性注入到页面
- 添加全局CSS

我认为如果您创建一个上下文提供程序并在`RootLayout`中使用它,就像这样

import NavBar from "./Navbar";
// 为身份验证设置全局状态
// 您可能为不同的目的创建不同的上下文
import AuthContext from "./AuthContext";
import "./global.css";
import "anyNpmModule.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>
          <AuthContext>
            <main>
              <NavBar />
              {children}
            </main>
          </AuthContext>
        </main>
      </body>
    </html>
  );
}
英文:

there is not a corresponding file in app directory. this is what pages/_app.js used for

  • Set up a global state
  • Define global components
  • Inject props into pages
  • Add global CSS

I think if you create a context provider and use it in RootLayout like this

import NavBar from &quot;./Navbar&quot;;
// you set the global state for auth
// you might create different contexts for different purpose
import AuthContext from &quot;./AuthContext&quot;;
import &quot;./global.css&quot;;
import &quot;anyNpmModule.css&quot;;

export default function RootLayout({children }:{children:React.ReactNode}) 
 {
  return (
    &lt;html lang=&quot;en&quot;&gt;
      &lt;head /&gt;
      &lt;body&gt;
        &lt;main&gt;
          &lt;AuthContext&gt;
            &lt;main&gt;
              &lt;NavBar /&gt;
              {children}
            &lt;/main&gt;
          &lt;/AuthContext&gt;
        &lt;/main&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  );
}

huangapple
  • 本文由 发表于 2023年5月14日 21:07:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76247639.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定