英文:
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>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论