I am trying to get through this tutorial, but, instead of getting data through PostgreSQL request, I would like to use an API, and store a JWT token to be able to make API calls on every page.

How can I pass a token from a page to its children, while being able to keep using NextJS file/folders routes naming convention (page.tsx)?

I’ve tried function parameters (with <Page token={token}/>), but it destroys other subpages of the dashboard

Main page (app/dashboard/layout.tsx):

import SideNav from '@/app/ui/dashboard/sidenav';
import { cookies } from 'next/headers';
import Page from './page';

export default function Layout({ children }: { children: React.ReactNode }) {
  const token = cookies().get("token")?.value!;
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">
        {/* <Page token={token}/> */}
        {children}
      </div>
    </div>
  );
}

Sub-page (app/dashboard/page.tsx)

export default function Page({ token }: { token: string }) {
    console.log("toke:", token);
  
    return (
      <div>Dashboard main content</div>
    );
}