Errors

The mistake. secret.js begins with import 'server-only'. Panel.js, a client component, imports it, and a server page renders the panel.

1
2import 'server-only';
export const key = 'sk-not-for-browsers';

1
2
3
4
5'use client';
import { key } from './secret.js';
export default function Panel() {
  return <p>{key}</p>;
}

1
2
3
4import Panel from './Panel.js';
export default function Page() {
  return <Panel />;
}

./app/server-only/secret.js:1:1
Error: You're importing a module that depends on "server-only" into a React Client Component module. This API is only available in Server Components but one of its parents is marked with "use client", so this module is also a Client Component.
    Learn more: https://nextjs.org/docs/app/building-your-application/rendering
> 1 | import 'server-only';
    | ^^^^^^^^^^^^^^^^^^^^^
  2 | export const key = 'sk-not-for-browsers';
  3 |

Ecmascript file had an error

Import traces:
  Client Component Browser:
    ./app/server-only/secret.js [Client Component Browser]
    ./app/server-only/Panel.js [Client Component Browser]
    ./app/server-only/Panel.js [Server Component]
    ./app/server-only/page.js [Server Component]

  Client Component SSR:
    ./app/server-only/secret.js [Client Component SSR]
    ./app/server-only/Panel.js [Client Component SSR]
    ./app/server-only/Panel.js [Server Component]
    ./app/server-only/page.js [Server Component]

ok   the log shows "You're importing a module that depends on \"server-only\" into a React Client Component module"
ok   the log shows "'server-only' cannot be imported from a Client Component module"

What it means. The server-only import is a marker. Its job is to make the build fail if the module could ever be sent to a browser, and a client component's imports are sent to the browser. The log held two messages for this one mistake (the panel's checks found both) and an import trace that walks from the page to the module.

The fix. Keep the code that uses the secret on the server: import it in a server component, and give the client component only the result, as a prop (lesson 10).

The mistake. page.js has no 'use client' directive and calls useState.

1
2
3
4
5import { useState } from 'react';
export default function Page() {
  const [count] = useState(0);
  return <p>{count}</p>;
}

./app/hook/page.js:1:10
Error: You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.
    Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
> 1 | import { useState } from 'react';
    |          ^^^^^^^^
  2 | export default function Page() {
  3 |   const [count] = useState(0);
  4 |   return <p>{count}</p>;

Ecmascript file had an error

ok   the log shows "You're importing a module that depends on `useState` into a React Server Component module"

What it means. Components are server components unless a file or one of its parents is marked, and a hook such as useState works only in a client component, as the message says. The message points at the import, not at the call.

The fix. Put the state in a small component in a file that begins with 'use client' and render it from the server page (lesson 9).

The mistake. page.js begins with 'use client' and also exports metadata.

1
2
3
4
5'use client';
export const metadata = { title: 'Nope' };
export default function Page() {
  return <p>hello</p>;
}

./app/client-metadata/page.js:2:14
Error: You are attempting to export "metadata" from a component marked with "use client", which is disallowed. "metadata" must be resolved on the server before the page component is rendered. Keep your page as a Server Component and move Client Component logic to a separate file. Read more: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#why-generatemetadata-is-server-component-only
  1 | 'use client';
> 2 | export const metadata = { title: 'Nope' };
    |              ^^^^^^^^
  3 | export default function Page() {
  4 |   return <p>hello</p>;
  5 | }

Ecmascript file had an error

Import traces:
  Client Component Browser:
    ./app/client-metadata/page.js [Client Component Browser]
    ./app/client-metadata/page.js [Server Component]

  Client Component SSR:
    ./app/client-metadata/page.js [Client Component SSR]
    ./app/client-metadata/page.js [Server Component]

ok   the log shows "You are attempting to export \"metadata\" from a component marked with \"use client\", which is disallowed."

What it means. Metadata is turned into tags on the server before the page renders, so the file that exports it has to be a server file. The message says to keep the page a server component and move the client logic into a file of its own.

The fix. Remove the directive from page.js, move whatever needed the browser to a client component, and keep metadata (or generateMetadata) in the page (lesson 23).

The mistake. actions.js begins with 'use server', exports an async function and also exports export const limit = 10.

1
2
3'use server';
export const limit = 10;
export async function save() {}

./app/not-async/actions.js:2:1
Error: Only async functions are allowed to be exported in a "use server" file.
  1 | 'use server';
> 2 | export const limit = 10;
    | ^^^^^^^^^^^^^^^^^^^^^^^^
  3 | export async function save() {}
  4 |

Ecmascript file had an error

Import trace:
  Server Component:
    ./app/not-async/actions.js
    ./app/not-async/page.js

ok   the log shows "Only async functions are allowed to be exported in a \"use server\" file."
ok   the log shows "Export save doesn't exist in target module"

What it means. Every export of a 'use server' file becomes an address a browser can post to, so each one has to be an async function. The same build also reported, for the page that imports save, that the export does not exist in the module; the panel's checks found that message in the log too.

The fix. Move the constant to another file and import it where it is needed; keep only async functions in the action file (lesson 17).

The mistake. page.js has a function that begins with 'use cache', in a project whose next.config.mjs does not set cacheComponents.

1
2
3
4
5
6
7async function getTitle() {
  'use cache';
  return 'cached';
}
export default async function Page() {
  return <h1>{await getTitle()}</h1>;
}

./app/use-cache/page.js:2:3
Error: To use "use cache", please enable the feature flag `cacheComponents` in your Next.js config.

    Read more: https://nextjs.org/docs/app/api-reference/directives/use-cache#usage
  1 | async function getTitle() {
> 2 |   'use cache';
    |   ^^^^^^^^^^^
  3 |   return 'cached';
  4 | }
  5 | export default async function Page() {

Ecmascript file had an error

ok   the log shows "To use \"use cache\", please enable the feature flag `cacheComponents` in your Next.js config."

What it means. The directive belongs to Cache Components, which is off by default in this version, so the compiler refuses it instead of ignoring it.

The fix. Set cacheComponents: true in the configuration, knowing that it changes how the whole project is cached (lesson 16), or leave the directive out.

The mistake. The project has both middleware.js, the old name, and proxy.js.

1
2
3
4import { NextResponse } from 'next/server';
export function proxy() {
  return NextResponse.next();
}

1
2
3
4import { NextResponse } from 'next/server';
export function middleware() {
  return NextResponse.next();
}

▲ Next.js 16.3.1 (Turbopack)
✓ Running next.config.mjs took <t>


> Build error occurred
Error: Both middleware file "./middleware.js" and proxy file "./proxy.js" are detected. Please use "./proxy.js" only. Learn more: https://nextjs.org/docs/messages/middleware-to-proxy
    at ignore-listed frames

ok   the log shows "Both middleware file \"./middleware.js\" and proxy file \"./proxy.js\" are detected"

What it means. The proxy replaced the middleware in version 16 and a project may have one of them. The build stops at the first problem, before it compiles anything, so there is no code frame: the message names both files.

The fix. Keep proxy.js, rename the exported function to proxy, and delete middleware.js (lesson 20).

The mistake. With cacheComponents: true, the home page awaits cookies() directly, with no <Suspense> around it.

1
2
3
4
5/** @type {import('next').NextConfig} */
const nextConfig = {
  cacheComponents: true,
};
export default nextConfig;

1
2
3
4
5import { cookies } from 'next/headers';
export default async function Home() {
  const jar = await cookies();
  return <h1>Theme: {jar.get('theme')?.value ?? 'none'}</h1>;
}

Error: Route "/": Next.js encountered uncached or runtime data during prerendering.

`fetch(...)`, `cookies()`, `headers()`, `params`, `searchParams`, or `connection()` accessed outside of `<Suspense>` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.

Ways to fix this:
  - [stream] Provide a placeholder with `<Suspense fallback={...}>` around the data access
  - [cache] For uncached data (`fetch`, database calls): cache the access with `"use cache"` (does not apply to `connection()`)
  - [block] Set `export const instant = false` to allow a blocking route

Learn more: https://nextjs.org/docs/messages/blocking-prerender-dynamic
To get a more detailed stack trace and pinpoint the issue, try one of the following:
  - Start the app in development mode by running `next dev`, then open "/" in your browser to investigate the error.
  - Rerun the production build with `next build --debug-prerender` to generate better stack traces.
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /page: /, exiting the build.
⨯ Next.js build worker exited with code: 1 and signal: null

ok   the log shows "Route \"/\": Next.js encountered uncached or runtime data during prerendering."
ok   the log shows "[stream] Provide a placeholder with `<Suspense fallback={...}>`"
ok   the log shows "[cache] For uncached data"
ok   the log shows "[block] Set `export const instant = false`"
ok   the log shows "Error occurred prerendering page \"/\"."

What it means. This error does not come from the compiler. The code compiled, and then the build rendered the page and found that it needed data that only exists per request. It names the route, lists the three ways out, and ends with the line that names the page it was prerendering. The stack frames were left out of the panel.

The fix. Pick one of the three the message lists: wrap the part that reads the cookie in <Suspense> with a fallback so the rest is prerendered; cache the access with "use cache"; or allow a blocking route. Streaming is the one lesson 12 and lesson 16 describe.

The mistake. With cacheComponents: true, page.js exports dynamic = 'force-dynamic'.

1
2
3
4export const dynamic = 'force-dynamic';
export default function Home() {
  return <h1>Home</h1>;
}

./app/page.js:1:14
Error: Route segment config "dynamic" is not compatible with `nextConfig.cacheComponents`. Please remove it.
> 1 | export const dynamic = 'force-dynamic';
    |              ^^^^^^^
  2 | export default function Home() {
  3 |   return <h1>Home</h1>;
  4 | }

Ecmascript file had an error

ok   the log shows "Route segment config \"dynamic\" is not compatible with `nextConfig.cacheComponents`. Please remove it."

What it means. Under Cache Components the old route segment options that decided static against dynamic are gone: what is dynamic is decided by what the code reads. The message asks you to remove the export. (The same build is the one lesson 29 reads from top to bottom.)

The fix. Delete the export. To make part of a page per-request, read the request data inside <Suspense>; to keep a part static, cache it.

The mistake. The page calls cookies().get('theme') and does not await cookies().

1
2
3
4
5import { cookies } from 'next/headers';
export default function Page() {
  const theme = cookies().get('theme');
  return <p>{theme ? theme.value : 'no theme'}</p>;
}

1
2
3const res = await fetch(process.env.BASE_URL + '/err/cookies-sync');
console.log('GET /err/cookies-sync ->', res.status);
check('the page answers 500', res.status, 500);

GET /err/cookies-sync -> 500
ok   the page answers 500

Error: Route "/err/cookies-sync" used `cookies().get`. `cookies()` returns a Promise and must be unwrapped with `await` or `React.use()` before accessing its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at Page (app/err/cookies-sync/page.js:3:24)
  1 | import { cookies } from 'next/headers';
  2 | export default function Page() {
> 3 |   const theme = cookies().get('theme');
    |                        ^
  4 |   return <p>{theme ? theme.value : 'no theme'}</p>;
  5 | }
  6 |
⨯ TypeError: {imported module ./nodemodules/next/headers.js}.cookies(...).get is not a function
    at Page (app/err/cookies-sync/page.js:3:27)
  1 | import { cookies } from 'next/headers';
  2 | export default function Page() {
> 3 |   const theme = cookies().get('theme');
    |                           ^
  4 |   return <p>{theme ? theme.value : 'no theme'}</p>;
  5 | }
  6 | {
  digest: '<digest>'
}
 GET /err/cookies-sync 500 in <t> (next.js: <t>, application-code: <t>)

What it means. In version 16 cookies(), headers() and the other request functions return Promises. The first line of the log is Next.js recognising the mistake and saying what to do; the second, the TypeError, is what JavaScript then does with it, and that one is what the page answers 500 for.

The fix. const jar = await cookies(), and make the component async (lesson 21).

The mistake. The page reads params.slug straight from its props.

1
2
3export default function Page({ params }) {
  return <p>{`slug: ${params.slug}`}</p>;
}

1
2
3
4
5const res = await fetch(process.env.BASE_URL + '/err/params-sync/abc');
const text = />(slug: [^<]*)</.exec(await res.text())[1];
console.log('GET /err/params-sync/abc ->', res.status, ' the page says:', text);
check('the page answers 200', res.status, 200);
check('but where the slug should be it says undefined', text, 'slug: undefined');

GET /err/params-sync/abc -> 200  the page says: slug: undefined
ok   the page answers 200
ok   but where the slug should be it says undefined

Error: Route "/err/params-sync/[slug]" used `params.slug`. `params` is a Promise and must be unwrapped with `await` or `React.use()` before accessing its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at Page (app/err/params-sync/[slug]/page.js:2:30)
  1 | export default function Page({ params }) {
> 2 |   return <p>{`slug: ${params.slug}`}</p>;
    |                              ^
  3 | }
  4 |
 GET /err/params-sync/abc 200 in <t> (next.js: <t>, application-code: <t>)

What it means. This one is the quietest of the set: the page answered 200 and rendered slug: undefined, because a Promise has no property called slug. The log is the only sign. It says that the Promise must be unwrapped before its properties are read.

The fix. const { slug } = await params in an async component (lesson 5).

The mistake. Two pages: one gives a <button> an onClick in a server component; the other passes a function prop, onPick, to a client component.

1
2
3export default function Page() {
  return <button onClick={() => console.log('clicked')}>Click</button>;
}

1
2
3
4'use client';
export default function Picker({ onPick }) {
  return <button onClick={() => onPick('a')}>Pick</button>;
}

1
2
3
4import Picker from './Picker.js';
export default function Page() {
  return <Picker onPick={(value) => console.log(value)} />;
}

1
2
3
4
5
6const base = process.env.BASE_URL;
const handler = await fetch(base + '/err/handler');
const prop = await fetch(base + '/err/fn-prop');
console.log('GET /err/handler ->', handler.status);
console.log('GET /err/fn-prop ->', prop.status);
check('both pages answer 500', [handler.status, prop.status], [500, 500]);

GET /err/handler -> 500
GET /err/fn-prop -> 500
ok   both pages answer 500

⨯ Error: Event handlers cannot be passed to Client Component props.
  <button onClick={function onClick} children=...>
                  ^^^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at ignore-listed frames {
  digest: '<digest>'
}
 GET /err/handler 500 in <t> (next.js: <t>, application-code: <t>)
⨯ Error: Event handlers cannot be passed to Client Component props.
  <... onPick={function onPick}>
              ^^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at ignore-listed frames {
  digest: '<digest>'
}
 GET /err/fn-prop 500 in <t> (next.js: <t>, application-code: <t>)

What it means. Props that cross from a server component to a client component are serialised, and a function cannot be. The message marks the offending prop with carets. Both variants gave the same message in this version.

The fix. Move the element that needs the handler into a client component and render that from the server (lesson 9), or pass a Server Action, which can cross (lesson 17).

The mistake. The page renders window.innerWidth.

1
2
3export default function Page() {
  return <p>Width: {window.innerWidth}</p>;
}

1
2
3const res = await fetch(process.env.BASE_URL + '/err/window');
console.log('GET /err/window ->', res.status);
check('the page answers 500', res.status, 500);

GET /err/window -> 500
ok   the page answers 500

⨯ ReferenceError: window is not defined
    at Page (app/err/window/page.js:2:21)
  1 | export default function Page() {
> 2 |   return <p>Width: {window.innerWidth}</p>;
    |                     ^
  3 | }
  4 | {
  digest: '<digest>'
}
 GET /err/window 500 in <t> (next.js: <t>, application-code: <t>)

What it means. A server component runs in Node.js, which has no window, document or localStorage. The log shows the line.

The fix. Do browser-only work in a client component, inside an effect, which runs only in the browser (React course).

The mistake. The page renders <Image src="/x.png" alt="" /> with no width and height.

1
2
3
4import Image from 'next/image';
export default function Page() {
  return <Image src="/x.png" alt="" />;
}

1
2
3const res = await fetch(process.env.BASE_URL + '/err/image');
console.log('GET /err/image ->', res.status);
check('the page answers 500', res.status, 500);

GET /err/image -> 500
ok   the page answers 500

⨯ Error: Image with src "/x.png" is missing required "width" property.
    at ignore-listed frames {
  digest: '<digest>'
}
 GET /err/image 500 in <t> (next.js: <t>, application-code: <t>)

What it means. The component needs a size to reserve space before the picture loads (lesson 24), and an image from public/ gives it nothing to read one from.

The fix. Give width and height, or fill inside a sized parent, or import the file so its size is known.

The mistake. The page exports dynamic = 'error', which asks Next.js to fail if the page cannot be static, and then awaits cookies().

1
2
3
4
5
6import { cookies } from 'next/headers';
export const dynamic = 'error';
export default async function Page() {
  const jar = await cookies();
  return <p>{jar.size} cookies</p>;
}

1
2
3const res = await fetch(process.env.BASE_URL + '/err/static-error');
console.log('GET /err/static-error ->', res.status);
check('the page answers 500', res.status, 500);

GET /err/static-error -> 500
ok   the page answers 500

⨯ Error: Route /err/static-error with `dynamic = "error"` couldn't be rendered statically because it used `cookies()`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering
    at Page (app/err/static-error/page.js:4:28)
  2 | export const dynamic = 'error';
  3 | export default async function Page() {
> 4 |   const jar = await cookies();
    |                            ^
  5 |   return <p>{jar.size} cookies</p>;
  6 | }
  7 | {
  code: 'NEXT_STATIC_GEN_BAILOUT',
  digest: '<digest>'
}
 GET /err/static-error 500 in <t> (next.js: <t>, application-code: <t>)

What it means. The option is a promise that a page is static, and reading the request breaks it. The error carries a code, NEXT_STATIC_GEN_BAILOUT, which is how the framework tells this kind of failure from others.

The fix. Either remove the export and accept a per-request page, or take the cookie reading out of the page (lesson 11).

The mistake. The page exports revalidate = 'soon'.

1
2
3
4export const revalidate = 'soon';
export default function Page() {
  return <p>revalidate</p>;
}

1
2
3const res = await fetch(process.env.BASE_URL + '/err/revalidate');
console.log('GET /err/revalidate ->', res.status);
check('the page answers 500', res.status, 500);

GET /err/revalidate -> 500
ok   the page answers 500

⨯ Error: Invalid revalidate value "soon" on "/err/revalidate", must be a non-negative number or false
    at ignore-listed frames
⨯ Error: Invalid revalidate value "soon" on "/err/revalidate", must be a non-negative number or false
    at ignore-listed frames {
  page: '/err/revalidate'
}
 GET /err/revalidate 500 in <t> (next.js: <t>, application-code: <t>)

What it means. The option takes a number of seconds or false. A string is rejected when the route is read, and here the message was printed twice.

The fix. Use a number: export const revalidate = 60 (lesson 14).

The mistake. A client component imports useRouter from next/router, the Pages Router's.

1
2
3
4
5
6'use client';
import { useRouter } from 'next/router';
export default function Go() {
  const router = useRouter();
  return <button onClick={() => router.push('/')}>Go</button>;
}

1
2
3
4import Go from './Go.js';
export default function Page() {
  return <Go />;
}

1
2
3const res = await fetch(process.env.BASE_URL + '/err/old-router');
console.log('GET /err/old-router ->', res.status);
check('the page answers 500', res.status, 500);

GET /err/old-router -> 500
ok   the page answers 500

⨯ Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at Go (app/err/old-router/Go.js:4:27)
  2 | import { useRouter } from 'next/router';
  3 | export default function Go() {
> 4 |   const router = useRouter();
    |                           ^
  5 |   return <button onClick={() => router.push('/')}>Go</button>;
  6 | }
  7 | {
  digest: '<digest>'
}
 GET /err/old-router 500 in <t> (next.js: <t>, application-code: <t>)

What it means. The two routers have separate hooks. In next dev the import resolves, and the error comes when the component renders and calls the hook with no Pages Router to talk to.

The fix. Import useRouter from next/navigation (lesson 6).

The mistake. route.js has export default function handler(), as a Pages Router API route would.

1
2
3export default function handler() {
  return new Response('hello');
}

1
2
3const res = await fetch(process.env.BASE_URL + '/err/default-export');
console.log('GET /err/default-export ->', res.status);
check('the page answers 405', res.status, 405);

GET /err/default-export -> 405
ok   the page answers 405

⨯ Detected default export in '[project]/app/err/default-export/route.js'. Export a named export for each HTTP method instead.
⨯ No HTTP methods exported in '[project]/app/err/default-export/route.js'. Export a named export for each HTTP method.
 GET /err/default-export 405 in <t> (next.js: <t>, application-code: <t>)

What it means. A route handler exports one function for each HTTP method it answers. A default export is ignored, so the file exports no method at all, and the request gets a 405. Both messages are in the log.

The fix. Name the export after the method: export function GET() (lesson 19).

The mistake. A POST names an action id that this build never made: a stale form from an older deployment, or a made-up one.

1
2
3
4
5
6const base = process.env.BASE_URL;
const body = new FormData();
body.append('$ACTION_ID_' + '0'.repeat(40), '');
const res = await fetch(base + '/actions', { method: 'POST', body, headers: { origin: base } });
console.log('POST with an unknown action id ->', res.status);
check('the server answers 500', res.status, 500);

POST with an unknown action id -> 500
ok   the server answers 500

⨯ Error: Failed to find Server Action. This request might be from an older or newer deployment.
Read more: https://nextjs.org/docs/messages/failed-to-find-server-action
    at ignore-listed frames
⨯ Error: Failed to find Server Action. This request might be from an older or newer deployment.
Read more: https://nextjs.org/docs/messages/failed-to-find-server-action
    at ignore-listed frames

What it means. Action ids are made by the build, so a form rendered by one build can be posted after the next one is deployed. The message names that cause. An id the server has never had is treated the same way, which is also why guessing ids gets an attacker nothing (and why actions still check the session themselves, lesson 27).

The fix. For users with an old page open, a reload is enough; teams that deploy often keep the old build's actions available for a while. In your own code there is nothing to change.

The mistake. Leaky.js is a client component and renders process.env.APP_GREETING, a variable without the NEXT_PUBLIC_ prefix.

1
2
3
4
5
6'use client';

export default function Leaky() {
  // APP_GREETING has no NEXT_PUBLIC_ prefix, so nothing replaces this expression in the code sent to browsers.
  return <p data-leaky>{`APP_GREETING is ${String(process.env.APP_GREETING)}`}</p>;
}

1
2
3
4
5
6
7
8
9
10import Leaky from './Leaky.js';

export default function Page() {
  return (
    <main>
      <h1>A server variable in a client component</h1>
      <Leaky />
    </main>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17import { readdirSync, readFileSync } from 'node:fs';

const base = process.env.BASE_URL;
const html = await (await fetch(base + '/env/leak')).text();
const rendered = /<p data-leaky[^>]*>([^<]*)<\/p>/.exec(html)[1];
const scripts = readdirSync(process.env.APP_DIR + '/.next/static/chunks', { withFileTypes: true })
  .filter((entry) => entry.isFile() && entry.name.endsWith('.js'))
  .map((entry) => readFileSync(entry.parentPath + '/' + entry.name, 'utf8'));
const mentionsName = scripts.some((text) => text.includes('APP_GREETING'));
const holdsValue = scripts.some((text) => text.includes('hello from .env'));

console.log('the server rendered:', rendered);
console.log('a script sent to browsers mentions the variable:', mentionsName);
console.log('a script sent to browsers holds its value:', holdsValue);
check('the server rendered the value, because the server has the real environment', rendered, 'APP_GREETING is hello from .env');
check('the scripts sent to browsers refer to the variable', mentionsName, true);
check('and none of them holds its value', holdsValue, false);

the server rendered: APP_GREETING is hello from .env
a script sent to browsers mentions the variable: true
a script sent to browsers holds its value: false
ok   the server rendered the value, because the server has the real environment
ok   the scripts sent to browsers refer to the variable
ok   and none of them holds its value

What it means. There is no error anywhere, which is what makes this one worth knowing. The server renders the component too, with the real environment, so the HTML has the value. Only NEXT_PUBLIC_ variables are written into the code sent to the browser at build time (lesson 22). The panel shows both halves: the value in the HTML, and in no script, though a script does name the variable. What a browser then renders was not run, since no panel here has one. Because no script holds the value, the browser cannot render the text the server sent, and React would report that difference as a hydration mismatch.

The fix. Read the variable in a server component and pass it down as a prop, or, if it is meant to be public, rename it with the NEXT_PUBLIC_ prefix and build again.