英文:
What's the alternative to pages/_app.js in app router in NextJS?
问题
对于app router,您在NextJS中需要使用app.js文件来实现与pages/_app.js在page 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 "./Navbar";
// you set the global state for auth
// you might create different contexts for different purpose
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>
  );
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论