Next build v15.1.4: Unable to run `next build` - "Error occurred prerendering page "/page". Read more: https://nextjs.org/docs/messages/prerender-error" #74858

anandkkpr · 2025-01-14T10:05:11Z

anandkkpr
Jan 14, 2025

Summary

I've been struggling with this for over a day now and am at my wits end. This build/compile error is haunting me!

TypeError: Cannot read properties of null (reading 'useContext')
    at T (.next/server/pages/_document.js:6:1263)
Error occurred prerendering page "/page". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')

Our project was on Next v14 on Node.js 20 so I upgraded both Next to v15 and Node.js to 22 (to match Vercel's latest compatibilities).

I've been searching high and low for hours and cannot find anything on the internet to help resolve this issue nor anything in my codebase that is referencing 'useContext" as shown in the error log (below).

I've been running next build -d hoping to track down the problem file(s) so I can correct any issues with getStaticProps or use client vs use server or anything else that may be causing this but the error messaging doesn't show which source files are being compiled that are causing this to break.

I started with no 404 nor 500 TSX files yesterday, I had other errors showing, all related to "pre-rendering" and, on a hint from some SO answer or otherwise, I tried creating these missing error handling files (after upgrading to Next.js 15). This had the effect of removing other issues but now I'm stuck with this one.

I have read the Next.js Custom Errors documentation and think I've followed it correctly but I'm still getting this error. I truly cannot figure out what I'm missing here and more importantly, I can't figure out what to do in order to get better debugging information in order to try fixing things.

I have been able to build the project by bypassing pre-rendering but updating my Build command to be next build --experimental-build-mode=compile so there's that.

I'm unable to figure out how to reproduce this issue other than provide the error log and some other Next.js meta files+the contents of my error TSX files... Pasting those herebelow. Someone, anyone, any help will be so very much appreciated!

Error log

TypeError: Cannot read properties of null (reading 'useContext')
    at T (.next/server/pages/_document.js:6:1263)
Error occurred prerendering page "/page". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (~/www/node_modules/react/cjs/react.production.js:488:33)
    at Y (~/www/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:5453)
    at T (~/www/.next/server/pages/_document.js:6:1263)
    at renderWithHooks (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4189:18)
    at renderElement (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4327:14)
    at retryNode (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4871:16)
    at renderNodeDestructive (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4689:7)
    at renderElement (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4324:7)
    at retryNode (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4871:16)
    at renderNodeDestructive (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4689:7)
Export encountered an error on /page, exiting the build.
 ⨯ Static worker exited with code: 1 and signal: null

package.json

{
  "name": "nextapiproject",
  "version": "2.4.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "debug": "NODE_OPTIONS='--inspect' next dev -p40101 -Hnx.api.faura.lcl",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@googleapis/addressvalidation": "0.1.1",
    "@googleapis/places": "9.4.1",
    "@prisma/client": "^5.22.0",
    "@sendgrid/mail": "^8.1.4",
    "@sentry/browser": "8.33.0",
    "@sentry/nextjs": "^7.104.0",
    "@sparticuz/chromium-min": "^123.0.1",
    "@supabase/sentry-js-integration": "0.2.0",
    "@supabase/ssr": "^0.1.0",
    "@supabase/supabase-js": "^2.45",
    "base64url": "^3.0.1",
    "http-responses-ts": "^0.0.2",
    "inversify-react": "^1.1.1",
    "jsonwebtoken": "^9.0.2",
    "micromatch": "^4.0.8",
    "next": "15.1.4",
    "preact": "^10.25.3",
    "preact-render-to-string": "^6.5.12",
    "puppeteer": "^22.13.0",
    "puppeteer-core": "^22.13.0",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "uuid": "^11.0.2",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/jsonwebtoken": "^9.0.5",
    "@types/micromatch": "^4.0.9",
    "@types/node": "^20",
    "@types/react": "19.0.6",
    "@types/react-dom": "19.0.3",
    "@types/uuid": "^10.0.0",
    "autoprefixer": "^10.4.19",
    "eslint": "^8",
    "eslint-config-next": "15.1.4",
    "eslint-config-prettier": "^9.1.0",
    "postcss": "^8.4.49",
    "prisma": "^5.16.2",
    "tailwindcss": "^3.4.17",
    "ts-auto-guard": "^4.1.5",
    "typescript": "^5"
  },
  "resolutions": {
    "@types/react": "19.0.6",
    "@types/react-dom": "19.0.3"
  }
}

next.config.mjs

import { withSentryConfig } from '@sentry/nextjs';

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['jsonwebtoken'],
  serverExternalPackages: ['puppeteer-core', '@sparticuz/chromium'],
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: process.env.NEXT_PUBLIC_SUPABASE_HOST_LCL ?? '',
        port: process.env.NEXT_PUBLIC_SUPABASE_HOST_PORT_LCL ?? '',
        pathname: '**',
      }
    ],
  },
  publicRuntimeConfig: {
    baseUrl: process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3333',
  },
};

export default withSentryConfig(
  nextConfig,
  {
    // For all available options, see:
    // https://github.com/getsentry/sentry-webpack-plugin#options

    // Suppresses source map uploading logs during build
    silent: true,
    org: 'home',
    project: 'nextapiproject',
  },
  {
    // For all available options, see:
    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

    // Upload a larger set of source maps for prettier stack traces (increases build time)
    widenClientFileUpload: true,

    // Transpiles SDK to be compatible with IE11 (increases bundle size)
    transpileClientSDK: true,

    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
    tunnelRoute: '/monitoring',

    // Hides source maps from generated client bundles
    hideSourceMaps: true,

    // Automatically tree-shake Sentry logger statements to reduce bundle size
    disableLogger: true,

    // Enables automatic instrumentation of Vercel Cron Monitors.
    // See the following for more information:
    // https://docs.sentry.io/product/crons/
    // https://vercel.com/docs/cron-jobs
    automaticVercelMonitors: true,
  },
);

/src/app/not-found.tsx (was /src/app/404.tsx) | UPDATE: I've deleted this file and replaced it with `/src/app/not-found.tsx`

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
    </div>
  )
}

/src/app/500.tsx | UPDATE: I've deleted this file

const Custom500 = () => {
  return <h1>500 - Server-side error occurred</h1>;
};

export default Custom500;

/src/pages/_error.js (was /src/app/error.tsx) | UPDATE: I've moved and renamed this file from `/src/app/error.tsx` to `/src/pages/_error.js`

function Error({ statusCode }) {
	return (
		<p>
			{statusCode
				? `An error ${statusCode} occurred on server`
				: 'An error occurred on client'}
		</p>
	);
}

Error.getInitialProps = ({ res, err }) => {
	const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
	return { statusCode };
};

export default Error;

/src/app/global-error.tsx

'use client'; // Error boundaries must be Client Components

import * as Sentry from '@sentry/nextjs';
import Error from 'next/error';
import { useEffect } from 'react';

const GlobalError = ({ error, reset }: {
  error: Error & { digest?: string }
  reset: () => void
}) => {
  useEffect(() => {
    Sentry.captureException(error);
  }, [error]);

  return (
    // global-error must include html and body tags
    <html>
    <body>
    <h2>Something went wrong!</h2>
    <button  => reset()}>Try again</button>
    </body>
    </html>
  );
}

export default GlobalError;

/src/app/layout.tsx

import type { Metadata } from 'next';

// These styles apply to every route in the application
import './globals.css';

// Import Open Sans font
import { Open_Sans } from 'next/font/google';

// Configure our font object
const openSans = Open_Sans({
  weight: ['300', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
});

export const metadata: Metadata = {
  title: 'Faura Backend',
  description: 'Faura Backend Interface',
};

// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
const RootLayout = (
  { children }: { children: React.ReactNode },
) => {
  return (
    <html lang="en" className={openSans.className}>
    <body>{children}</body>
    </html>
  );
};

export default RootLayout;

/src/pages/page.tsx

'use client';

const Page = () => {
  return <div>
    <h1>Server Status</h1>
    <p>Server is up and running.</p>
  </div>;
};

export default Page;

Screenshot of src dir's root where error *.tsx files have been created:

I hope this is enough information for the community to be able to figure out what's going on. Thank you!

Additional information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Thu Jan  2 19:26:03 UTC 2025
  Available memory (MB): 31441
  Available CPU cores: 22
Binaries:
  Node: 22.13.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 15.1.4 // Latest available version is detected (15.1.4).
  eslint-config-next: 15.1.4
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.6.3
Next.js Config:
  output: N/A



### Example

_No response_

Answered by anandkkpr

Jan 15, 2025

OK! So, a little background followed by "the answer"...

Background

TSX/JSX Files, HTML Render Templates in Our Project

Our project is intended to be an API server ONLY. We only intentionally serve ONE HTML page on the frontend: the index page which can be reached directly from https://our-domain.com - the HTML on this page only verifies that the server is running:

We do have ONE *.tsx files that is used to render an HTML page which we feed to Puppeteer in order to generate a download-able PDF file. That's it. All other *.tsx files are related this functionality and only exist because I've found that they need to in order for the project to compile successfully:

src/app/layout.tsx
src/ap…

View full answer

dev-kraken · 2025-01-14T11:55:34Z

dev-kraken
Jan 14, 2025

Try deleting the .next folder and node_modules, then reinstall dependencies and rebuild the project

1 reply

anandkkpr Jan 14, 2025
Author

Hi @dev-kraken , thank you for the advice. I have been running rm -rf node_modules .next && next build throughout this debugging challenge as I came across the suggestion elsewhere... Unfortunately, it did not fix the issue - albeit, the first time I did delete node_modules and .next, the error changed - so it did help in a way by ensuring that dependencies and stale cache are not a part of the continued compile-time error.

Thank you!

icyJoseph · 2025-01-14T18:32:48Z

icyJoseph
Jan 14, 2025
Collaborator

This often happens when you are trying to use useContext in a server component tree.

I can't reproduce though. You don't need use client in src/pages/page.tsx, you may not even want the src/pages directory to begin with.

1 reply

anandkkpr Jan 14, 2025
Author

Hi @icyJoseph , thank you for your help! I've removed src/pages/* - and this sort of lead me to a fix!!! Thank you for your advice!

NOTE: Regarding useContext in the build error log, this is so unhelpful because, doing a full grep -irE 'useContext' . through my codebase results in no hits - we dont' use this directive at all!

That said, OMG, I'm so thoroughly relieved!!!

The fix was a mix of doing a couple of things, which I'll try to detail in a suggested answer for posterity's sake.

Thanks again!

anandkkpr · 2025-01-15T01:03:28Z

anandkkpr
Jan 15, 2025
Author

OK! So, a little background followed by "the answer"...

Background

TSX/JSX Files, HTML Render Templates in Our Project

Our project is intended to be an API server ONLY. We only intentionally serve ONE HTML page on the frontend: the index page which can be reached directly from https://our-domain.com - the HTML on this page only verifies that the server is running:

We do have ONE *.tsx files that is used to render an HTML page which we feed to Puppeteer in order to generate a download-able PDF file. That's it. All other *.tsx files are related this functionality and only exist because I've found that they need to in order for the project to compile successfully:

src/app/layout.tsx
src/app/global-error.tsx
src/pages/_error.tsx
src/app/api/PATH/TO/PDF/SERVICE/pdfReport.tsx

Our Project's HTTP Code Based RESTful API Error Handling

The second part of the cause for my next build compile-time woes is related to our API's handling of errors... Note here: part of the solution is us continuing to "go against the grain" vis Next.js' requirement that accessing Dynamic Server data in API Route Handlers should be outside a try/catch block so that compile-time rendering can detect errors. I don't fully understand how/why this is the case but this is the second part of what we're "doing wrong" in our project (lesson learned!!!) and the following Stackoverflow Answer provided that missing bit of info that allowed me to fix the compile-time error without having to go into every single API endpoint Route and move uses of NextRequest.* out of the try/catch to the top/root of the API Handler function (screenshot: ).

Dynamic server usage: Page couldn't be rendered statically because it used nextUrl.searchParams in Next.js version 14

From the SO Answer:

The way Next.js knows when dynamic data is used is by throwing custom errors and catch them to switch the renderer method. Simply, when you use the request URL (e.g. request.nextUrl) Next.js internally will throw DynamicServerError and catch it at a top-level.

A Note About Our Solution

This is really specific to our use case (as described hereabove). The solution I've put in place, if I understand correctly, is essentially disabling static page generation for all Error pages and pretty much any future page because our both our Root Layout (/src/app/layout.tsx) and two Error Page Laytouts (/src/pages/_error.tsx and /src/app/global-error.tsx) have been updated to have export const dynamic = 'force-dynamic'; at the top of the file.

Solution Part 0:

A precursor to getting things to function again was upgrading from Node.js v20 to Node.js v22 (we're hosted on Vercel and this is the max compatible version they offer) AND THEN upgrading Next.js itself from v14.2.23 to v15.1.4.

Another unknown factor in the solution may be that I migrated from Exporting page handlers in *.tsx files from the older export default function ...(){} format to the following export pattern:

Solution Part 1: Update TSX files so that the compiler knows they will be dynamically rendered.

Ensure the Next.js compiler/page renderer is informed that all pages are going to be dynamically rendered by the server on request. This works for us because our server is an API-only server (other than the home/index page as I've mentioned).

We only have a few TSX files (listed below again) and all of them have been updated to "force dynamic" compilation:

`src/app/layout.tsx`

This is the ONLY TSX file/page that is not set to 'use client'; - mainly because I don't fully understand what 'use client'; and 'use server'; do - IIUC, it let's the compiler know that we're gonna use server-side functionality at Request time to load variables that are ultimately passed on into the HTML template (TSX/JSX) before the page is rendered... but I'm very new to Next.js and this is just a guess at this point.

import type { Metadata } from 'next';

# ↓ FORCING DYNAMIC HERE ↓
export const dynamic = 'force-dynamic';

// These styles apply to every route in the application
import './globals.css';

// Import Open Sans font
import { Open_Sans } from 'next/font/google';

// Configure our font object
const openSans = Open_Sans({
  weight: ['300', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
});

export const metadata: Metadata = {
  title: 'Our API Server',
  description: 'A cool API server.',
};

// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
const RootLayout = (
  { children }: { children: React.ReactNode },
) => {
  return (
    <html lang="en" className={openSans.className}>
    <body>{children}</body>
    </html>
  );
};

export default RootLayout;

`src/app/global-error.tsx`

// Error boundaries must be Client Components
'use client';
# ↓ FORCING DYNAMIC HERE ↓
export const dynamic = 'force-dynamic';

import Error from 'next/error';

const GlobalError = ({ error, reset }: {
  error: Error & { digest?: string }
  reset: () => void
}) => {

  return (
    // global-error must include html and body tags
    <html>
    <body>
    <h2>Something went wrong!</h2>
    <button  => reset()}>Try again</button>
    </body>
    </html>
  );
}

export default GlobalError;

`src/pages/_error.tsx`

This was part of how @icyJoseph's answer helped me... I experimented with both deleting and then keeping this file. In our case, compilation fails without this file. I don't understand/know what it's for - reason being that I would have thought that having /src/app/global-error.tsx would have been enough and setting that to be force-dynamic compiled should have handled all errors across both Client and Server rendered pages... but it didn't. This file was needed in order to make compilation work.

I'm guessing that this file is perhaps either a "legacy" file from Next.js 14 or is something that Next uses even now in v15 as a client side catch-all error-page template.

// Error boundaries must be Client Components
'use client';
# ↓ FORCING DYNAMIC HERE ↓
export const dynamic = 'force-dynamic';

const Error = ({ statusCode }: { statusCode: any }) => {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </p>
  );
};

Error.getInitialProps = ({ res, err }: { res: any, err: any }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default Error;

`src/app/api/PATH/TO/PDF/SERVICE/pdfReport.tsx`

'use client';
export const dynamic = 'force-dynamic';

/** @jsxRuntime classic */
/** @jsx h */

/* !!! SNIP !!! ------------------------------------------------------------ */

import imgLogo from '@/lib/utils/assets/logo.png';
import { Open_Sans } from 'next/font/google';
import { h } from 'preact';
import { render } from 'preact-render-to-string';

// Configure our font object
const openSans = Open_Sans({
  weight: ['300', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
});

export const RenderReportPdfHtml = (inspection: Partial<ReportData>) => {
  /* !!! SNIP !!! ---------------------------------------------------------- */

  return render(
    <html lang="en" className={openSans.className}>
    <head>
      <title>PDF Report</title>
      {/* eslint-disable-next-line @next/next/no-sync-scripts */}
      <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body>
      <div>
        {/* !!! SNIP !!! ----------------------------------------------------------*/}
      </div>
    </body>
    </html>,
  );

}

export default RenderReportPdfHtml;

Solution Part 2: If you use `NextRequest.*` data INSIDE Try/Catch blocks, be sure to detect and throw Next.js Errors!

We have an Error/Exception handling wrapper class that we use to generate and return HTTP Responses with appropriate HTTP Error Codes. Because we didn't fully understand how Next.js compiles the app and what the implications are when you are using Next.js purely as a RESTful API server, we've composed all our dozens of API Routes to wrap everything in a handler-function top-level try{} catch(){} block with our HTTP Error Response composer being the only code in the catch(){} block (as mentioned earlier in this post (@see: SO Answer here).

Here's a sample API Route:

export async function GET(request: NextRequest) {
  try {
    const searchParams = request.nextUrl.searchParams;
    /* !!! SNIP !!! ---------------------------------------------------------- */
  } catch (error) {
    return HttpExceptionErrorHandlerHelper.handleError(error);
  }
}

In order to not have to move the const searchParams = request.nextUrl.searchParams; up and out of the try/catch into the top and root of the Handler of all our Routes, what I've done is updated our HttpExceptionErrorHandlerHelper.handleError() handler like so:

import { HttpResponseCompositionHelper } from '@/lib/helpers/httpResponseComposition.helper';
import { isDynamicServerError } from 'next/dist/client/components/hooks-server-context';
import { isHTTPAccessFallbackError } from 'next/dist/client/components/http-access-fallback/http-access-fallback';
import { isHydrationError, isReactHydrationErrorMessage } from 'next/dist/client/components/is-hydration-error';
import { isNextRouterError } from 'next/dist/client/components/is-next-router-error';
import { isRedirectError } from 'next/dist/client/components/redirect-error';
import { isStaticGenBailoutError } from 'next/dist/client/components/static-generation-bailout';

/**
 * This list was found by conducting a search against exported Error Handler functions in the Next.js client
 * components lib itself using the following command:
 *
 *    ```
 *    grep -irE 'export declare function is\\w+Error' /PATH/TO/PROJECT/NODE_MODULES/next/dist/client/components
 *    ```
 */
export class HttpExceptionErrorHandlerHelper {
  public static handleError(error: any): Response {
    if (
      isDynamicServerError(error) ||
      isHTTPAccessFallbackError(error) ||
      isHydrationError(error) ||
      isNextRouterError(error) ||
      isReactHydrationErrorMessage(error) ||
      isRedirectError(error) ||
      isStaticGenBailoutError(error)
    ) {
      throw error;
    }

    const errorMessage = (error?.statusText)
      ? error.statusText
      : (error?.message)
        ? error.message
        : 'unexpected error.';

    if (error.constructor.name === 'Response') {
      errorMessage.toString().replaceAll(/[\r\n\t]/g, '').replaceAll(/\s+/g, ' ');
      console.log(
        `Error encountered when handling request: ${
          JSON.stringify(error.statusText)
        }`,
      );
      return error;
    }

    console.log(
      `Error encountered when handling request: ${errorMessage}`,
      error,
    );
    return HttpResponseCompositionHelper.internalServerError({
      errors: [{ message: `${errorMessage}` }],
      statusText: errorMessage.toString().replaceAll(/[\r\n\t]/g, '').replaceAll(/\s+/g, ' '),
    });
  }
}

Please take note of the code comment above that explains how I located and confirmed all exported isXYZError() functions that Next.js 15 is exporting. Based upon the SO Answer and for lack of time to delve deep into this matter, I've assumed that Next.js (and its server/compiler) need to be able to catch ALL of these errors so, instead of catching/handling these Errors with HTTP Error Code Responses, I've updated this class to "proxy" on these specific Errors so that Next.js itself can handle them.

This, dear reader, was the final step to getting our app to compile successfully again!

Conclusion

I truly hope that all this detailed information proves useful to future readers and I entreat the Next.js team to help explain what's going on here with some tutorial and/or documentation when/if possible. Official documentation that can be found when these types of compile-time errors occur would be absolutely invaluable and save days of stress for devs who find themselves in the sinking boat I had found myself in.

The final error I encountered on this journey which was cleared up by all the work above...

Please take note of this line in the error message: TypeError: Cannot read properties of null (reading 'useContext'). As I've mentioned above to @icyJoseph, there are no pages/files in our app that reference useContext at all...

To the Next.js team: If you could find a way to ensure compile-time errors like this can be traced back to their source in the codebase, this would be REALLY AWESOME! Not knowing which file(s) were at fault was the thing that cost me so much time making everything I did to try and resolve the issue purely trial/error - even though the error message provides a link to https://nextjs.org/docs/messages/prerender-error. If we can't find which file is failing the prerender-error OR if we are missing files (e.g. /src/pages/_error.tsx) for whatever reason, this is the info we need to be able to correct the compilation error.

NOTE: The Next.js documentation is fantastic - I very well may have missed some key resource - links are welcome!!!

 ✓ Collecting page data
(node:2287027) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
TypeError: Cannot read properties of null (reading 'useContext')
    at g (.next/server/pages/_error.js:6:12438)
Error occurred prerendering page "/500". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (~/www/node_modules/react/cjs/react.production.js:488:33)
    at g (~/www/.next/server/pages/_error.js:6:12438)
    at renderWithHooks (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4189:18)
    at renderElement (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4327:14)
    at retryNode (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4871:16)
    at renderNodeDestructive (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4689:7)
    at renderNode (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:5128:14)
    at renderChildrenArray (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:5019:7)
    at retryNode (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4885:9)
    at renderNodeDestructive (~/.asdf/installs/nodejs/22.13.0/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4689:7)
Export encountered an error on /_error: /500, exiting the build.
 ⨯ Static worker exited with code: 1 and signal: null

With heartfelt gratitude and thanks!

0 replies

amx100 · 2025-06-04T15:51:28Z

amx100
Jun 4, 2025

I encountered a similar problem, the application builds successfully and works locally, but on vercel it threw this error

"Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
Error: @supabase/ssr: Your project's URL and API key are required to create a Supabase client! Export encountered an error on /_not-found/page: /_not-found, exiting the build.
⨯ Next.js build worker exited with code: 1 and signal: null
Error: Command "npm run build" exited with 1"

WHAT WORKED FOR ME :
1.Go to your project on vercel
2.Go to the settings of project
3.Go to Environment Variables add .env file or try manually i suggest first option

0 replies

chibyk1000 · 2025-09-29T10:07:23Z

chibyk1000
Sep 29, 2025

i am experiencing the sanme issue on next@15.5.4, i have tried all i could

[TypeError: Cannot read properties of null (reading 'useContext')]
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
[TypeError: Cannot read properties of null (reading 'useContext')]
Export encountered an error on /_error: /404, exiting the build.
⨯ Next.js build worker exited with code: 1 and signal: null

1 reply

danlannan777 Oct 9, 2025

Currently losing my mind over this same error. Tried 900 different things and cannot get the build to run

staszek998 · 2025-10-20T12:37:58Z

staszek998
Oct 20, 2025

The solution suggested by @anandkkpr in this comment didn’t work for me, but I managed to get my Next.js app back on track thanks to the tip from @ObinnaAka here.

Hopefully this helps someone else too 🙂

0 replies

Next build v15.1.4: Unable to run next build - "Error occurred prerendering page "/page". Read more: https://nextjs.org/docs/messages/prerender-error" #74858

Uh oh!

Uh oh!

anandkkpr Jan 14, 2025

Summary

Error log

package.json

next.config.mjs

/src/app/not-found.tsx (was /src/app/404.tsx) | UPDATE: I've deleted this file and replaced it with /src/app/not-found.tsx

/src/app/500.tsx | UPDATE: I've deleted this file

/src/pages/_error.js (was /src/app/error.tsx) | UPDATE: I've moved and renamed this file from /src/app/error.tsx to /src/pages/_error.js

/src/app/global-error.tsx

/src/app/layout.tsx

/src/pages/page.tsx

Additional information

Background

TSX/JSX Files, HTML Render Templates in Our Project

Replies: 6 comments · 3 replies

Uh oh!

Uh oh!

dev-kraken Jan 14, 2025

Uh oh!

anandkkpr Jan 14, 2025 Author

Uh oh!

icyJoseph Jan 14, 2025 Collaborator

Uh oh!

anandkkpr Jan 14, 2025 Author

Uh oh!

anandkkpr Jan 15, 2025 Author

Background

TSX/JSX Files, HTML Render Templates in Our Project

Our Project's HTTP Code Based RESTful API Error Handling

A Note About Our Solution

Solution Part 0:

Solution Part 1: Update TSX files so that the compiler knows they will be dynamically rendered.

src/app/layout.tsx

src/app/global-error.tsx

src/pages/_error.tsx

src/app/api/PATH/TO/PDF/SERVICE/pdfReport.tsx

Solution Part 2: If you use NextRequest.* data INSIDE Try/Catch blocks, be sure to detect and throw Next.js Errors!

Conclusion

Uh oh!

amx100 Jun 4, 2025

Uh oh!

chibyk1000 Sep 29, 2025

Uh oh!

danlannan777 Oct 9, 2025

Uh oh!

staszek998 Oct 20, 2025

Next build v15.1.4: Unable to run `next build` - "Error occurred prerendering page "/page". Read more: https://nextjs.org/docs/messages/prerender-error" #74858

anandkkpr
Jan 14, 2025

/src/app/not-found.tsx (was /src/app/404.tsx) | UPDATE: I've deleted this file and replaced it with `/src/app/not-found.tsx`

/src/pages/_error.js (was /src/app/error.tsx) | UPDATE: I've moved and renamed this file from `/src/app/error.tsx` to `/src/pages/_error.js`

Replies: 6 comments 3 replies

dev-kraken
Jan 14, 2025

anandkkpr Jan 14, 2025
Author

icyJoseph
Jan 14, 2025
Collaborator

anandkkpr Jan 14, 2025
Author

anandkkpr
Jan 15, 2025
Author

`src/app/layout.tsx`

`src/app/global-error.tsx`

`src/pages/_error.tsx`

`src/app/api/PATH/TO/PDF/SERVICE/pdfReport.tsx`

Solution Part 2: If you use `NextRequest.*` data INSIDE Try/Catch blocks, be sure to detect and throw Next.js Errors!

amx100
Jun 4, 2025

chibyk1000
Sep 29, 2025

staszek998
Oct 20, 2025