Why is this lib needed in Nextjs (app router)? #155

PeturSteinn · 2024-10-10T21:15:07Z

PeturSteinn
Oct 10, 2024

Just curious for why this library is needed at all with the app router in Nextjs.
I just don't know why I would need the script tag at all? Like why is it not good enough to populate a context provider via root layout, where I can just stick my prefered environment variables in the value and then consume that provider wherever I want?

Here's a minimal setup that I have in my head:

import env from '@/env';
export default function RootLayout({ children }: { children: React.ReactNode }) {
  // This object can be created dynamically with some startsWith condition that I could have for my env vars that i would want to expose to the client.
  const runtimeEnv = {
    MY_VAR: env.MY_VAR,
    FOO: env.FOO,
  }

  return (
    <html lang="en">
      <body>
        {/* Provide the env values from the root layout */}
        <RuntimeEnvProvider env={runtimeEnv}>
          {children}
        </RuntimeEnvProvider>
      </body>
    </html>
  );
}

Then <RuntimeEnvProvider /> is just a regular old context provider

// context/RuntimeEnvContext.tsx
"use client";
import React, { createContext, useContext, ReactNode } from 'react';

// This could be stored elsewhere or just be a dynamic type somehow
type RuntimeEnvContextType = {
  MY_VAR: string;
  FOO: string;
};

const RuntimeEnvContext = createContext<RuntimeEnvContextType | undefined>(undefined);

export const RuntimeEnvProvider = ({ children, env }: { children: ReactNode; env: RuntimeEnvContextType }) => {
  return (
    <RuntimeEnvContext.Provider value={env}>
      {children}
    </RuntimeEnvContext.Provider>
  );
};

export const useRuntimeEnv = (): RuntimeEnvContextType => {
  const context = useContext(RuntimeEnvContext);
  if (!context) {
    throw new Error('useRuntimeEnv must be used within a RuntimeEnvProvider');
  }
  return context;
};

Then consuming it on the client would be easy like this....

// app/_components/foo.tsx
"use client"
import { useRuntimeEnv } from '@/context/RuntimeEnvContext';

export default function Foo() {
  const { MY_VAR, FOO } = useRuntimeEnv();

  return (
    <div className="container">
      <h1>Welcome to {MY_VAR}</h1>
      <p>FOO is: {FOO}</p>
    </div>
  );
}

I've got to be missing something, and I'm sorry if I am but I just have no idea why the script thing is needed at all.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Why is this lib needed in Nextjs (app router)? #155

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Why is this lib needed in Nextjs (app router)? #155

Uh oh!

PeturSteinn Oct 10, 2024

Replies: 0 comments

PeturSteinn
Oct 10, 2024