nextjs - 💡(How to fix) Fix Static build at multiple environments [1 comments, 2 participants]

Observe the build crash during the Generating static pages phase with a useContext error on /_global-error. The build fails during static generation of internal routes (/_global-error) with the following error: TypeError: Cannot read properties of null (reading 'useContext') Static generation should complete without context errors in internal error-boundary pages, especially when no custom logic is present in global-error.tsx. I am a fullstack developer working in an enterprise environment (Maersk). We need to generate builds targeted at a "Development" server environment (using Dev APIs) but with production optimizations. Next.js 16 seems to strictly lock next build to .env.production, ignoring external injection. The useContext error on _global-error prevents the build from finishing entirely. Error: Error occurred prerendering page "/_global-error". Read more: https://nextjs.org/docs/messages/prerender-error Export encountered an error on /_global-error/page: /_global-error, exiting the build. Error: Process completed with exit code 1.

TL;DR

• The issue can be resolved by ensuring that the env-cmd command correctly sets the environment variables for the next build process, potentially by modifying the build:dev script in package.json.

Guidance

• Verify that the env-cmd command is correctly setting the environment variables by running a test command, such as env-cmd -f .env.development printenv, to check if the variables are being loaded as expected.
• Modify the build:dev script in package.json to use the --env flag with next build, like "build:dev": "env-cmd -f .env.development next build --env" is not a viable solution since next build does not support an --env flag, instead consider using a cross-platform method to set environment variables.
• Check the Next.js documentation for any specific recommendations on using environment variables with the App Router and Turbopack, as the issue might be related to the new features introduced in Next.js 16.
• Consider setting the NODE_ENV environment variable to development before running the next build command to ensure that Next.js uses the correct environment configuration.

Example

No code example is provided as the issue is more related to the build process and environment variable configuration rather than a specific code snippet.

Notes

• The issue seems to be specific to the combination of Next.js 16, App Router, Turbopack, and the use of env-cmd on a Windows/PowerShell environment.
• The useContext error on /global-error might be a symptom of the underlying issue with environment variables not being correctly set.

Recommendation

• Apply a workaround by modifying the build:dev script to correctly set the environment variables, potentially using a cross-platform method to ensure compatibility with different operating systems.