我正在构建一个 Next.js 项目，我选择使用 Recoil 进行状态管理。我按照 next.js 13 中的 src/app/pages.tsx (应用程序路由器方法)结构组织我的项目进行路由，而不是使用默认的 _app.tsx方法。现在，我正在尝试弄清楚如何使用此结构通过 RecoilRoot 提供程序包装我的整个应用程序。
这是我的目录结构的一瞥:
my-nextjs-project/
├── node_modules/
├── public/
├── src/
│ ├── app/
│ │ ├── components/
│ │ ├── page.tsx
│ │ ├── global.css
│ │ ├── layout.tsx
│ │ └── ...other files
├── ...
由于我没有使用 _app.tsx，我想知道如何使用 RecoilRoot 提供程序封装整个应用程序以使 Recoil 状态可用在我的整个申请过程中。在这种情况下我是否需要修改不同的文件或应该考虑任何替代方法？
如果您能提供有关如何与 Next.js 中的应用程序路由器结构集成的任何见解、代码示例或指导，我将不胜感激。预先感谢您的帮助!
我一直在探索 Next.js 和 Recoil 的可用文档，但我遇到的大多数示例都使用默认的 _app.tsx 方法将应用程序包装在 RecoilRoot。由于我遵循应用程序路由器结构进行路由，因此我无法直接将这些示例应用到我的项目中。
我考虑过在 Next.js 13 中使用 RecoilRoot 手动包装每个单独的页面组件，但这似乎是重复的并且不符合最佳实践。
我的期望是找到一种方法，在不直接使用 _app.tsx 文件的情况下使用 RecoilRoot 包装整个应用程序，从而使 Recoil 状态可以跨所有页面和组件访问.
最佳答案
正如他们在 Upgrade Guide 上所说的那样page、pages/_app.js 和 pages/_document.js 已替换为 app/layout.js。
话虽如此，下面是设置 Recoil 模拟待办事项列表的示例:
// app/recoilContextProvider.tsx
"use client";
import { RecoilRoot, atom } from "recoil";
export const todoListState = atom({
key: "TodoList",
default: [],
});
export default function RecoidContextProvider({ children }: { children: React.ReactNode }) {
return <RecoilRoot>{children}</RecoilRoot>;
}
// app/layout.tsx
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import RecoidContextProvider from "./recoilContextProvider";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<RecoidContextProvider>{children}</RecoidContextProvider>
</body>
</html>
);
}
"use client";
import { useRecoilValue } from "recoil";
import { todoListState } from "./recoilContextProvider";
export default function TodoList() {
const todoList = useRecoilValue(todoListState);
console.log(todoList);
return <></>;
}
关于next.js - 使用 Next.js 13(应用程序路由器方法)结构将 RecoilRoot 集成到 Next.js 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76889857/