CODEWITHSUNDEEP
next.jsrecoiljs
TheSilentKnight
TheSilentKnight

Reputation: 134

Integrating RecoilRoot in Next.js using Next.js 13 (App router approach) structure

I'm building a Next.js project where I've chosen to use Recoil for state management. I've organized my project following the src/app/pages.tsx (app router approach) structure in next.js 13 for routing instead of using the default _app.tsx approach. Now, I'm trying to figure out how to wrap my entire app with the RecoilRoot provider using this structure.

Here's a glimpse of my directory structure:

my-nextjs-project/
├── node_modules/
├── public/
├── src/
│   ├── app/
│   │   ├── components/
│   │   ├── page.tsx
│   │   ├── global.css
│   │   ├── layout.tsx
│   │   └── ...other files
├── ...

As I'm not using the _app.tsx, I'm wondering how I can still wrap my entire app with the RecoilRoot provider to make the Recoil state available throughout my application. Is there a different file I need to modify or any alternative approach I should consider in this situation?

I'd appreciate any insights, code examples, or guidance on how to achieve this integration with the App router structure in Next.js. Thank you in advance for your help!

I've been exploring the available documentation for both Next.js and Recoil, but most of the examples I've come across use the default _app.tsx approach for wrapping the app in RecoilRoot. Since I'm following the App router structure for routing, I haven't been able to directly adapt those examples to my project.

I've considered manually wrapping each individual page component with RecoilRoot in Next.js 13, but this seems repetitive and not in line with best practices.

My expectation is to find a way to wrap the entire app with RecoilRoot without directly using the _app.tsx file, making the Recoil state accessible across all pages and components.

Upvotes: 2

Views: 5419

Answers (1)

Youssouf Oumar
Youssouf Oumar

Reputation: 46191

As they say on Upgrade Guide page, pages/_app.js and pages/_document.js have been replaced by app/layout.js.

That has been said, find below an example of setting up Recoil simulating a todo list:

// 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 <></>;
}

Upvotes: 1

Related Questions