How to use for project in between pages > app router migration #125

zy-jtp · 2024-05-13T18:51:42Z

zy-jtp
May 13, 2024

We are migrating our app to app router, but many pages are still using pages router. Is there any way of using next-runtime-env for both app and pages routers. I haven't been able to make it work. All accesses through env("NEXT_PUBLIC_MY_VAR") come as undefined. I even tried to install v1 and v3 with yarn resolutions and I still get undefined for all variables, please help🙏

badtant · 2024-06-26T12:16:51Z

badtant
Jun 26, 2024

I'm also wondering about this :)

We are currently using next 14 with pages router and with publicRuntime/serverRuntime. We want to start using the app router and incrementally migrate route for route to app router.

Is is possible to use this lib both in pages router and app router at the same time during migration?

0 replies

badtant · 2024-07-10T08:46:41Z

badtant
Jul 10, 2024

Ended up writing our own solution that works in pages and app router.
publicEnv is available both on server and client and serverEnv is only available on the server.

import { unstable_noStore as noStore } from 'next/cache';
import React from 'react';

export const isBrowser = (): boolean => typeof window === 'object';

const parsedPublicEnv = isBrowser()
    ? {}
    : {
          FOO: process.env.FOO,
      };

const parsedServerEnv = isBrowser()
    ? {}
    : {
          BAR: process.env.BAR,
      };

const getPublicEnv = () => {
    if (isBrowser()) {
        return window.PublicEnv;
    }

    return parsedPublicEnv;
};

export const publicEnv = getPublicEnv();

export const serverEnv = parsedServerEnv;

export const RenderPublicEnv = () => {
    noStore();

    return (
        <script
            dangerouslySetInnerHTML={{ __html: `window.PublicEnv = ${JSON.stringify(publicEnv)}` }}
        ></script>
    );
};

Usage in layout (or _document). Initialising the solution.

import React from 'react';
import { RenderPublicEnv } from 'env';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html>
            <head>
                <RenderPublicEnv />
            </head>
            <body>{children}</body>
        </html>
    );
}

Usage of publicEnv in a component (do the same for serverEnv).

import React from 'react';
import { publicEnv } from 'env';

const Component = () => {
    return (
            <div>{publicEnv.FOO}</div>
    );
};

export default Component;

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use for project in between pages > app router migration #125

{{title}}

Replies: 2 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to use for project in between pages > app router migration #125

zy-jtp May 13, 2024

Replies: 2 comments

badtant Jun 26, 2024

badtant Jul 10, 2024

zy-jtp
May 13, 2024

badtant
Jun 26, 2024

badtant
Jul 10, 2024