Static Page Export Times out
Unanswered
Cinnamon Teal posted this in #help-forum
Cinnamon TealOP
I am looking to build a nextjs static export, however for some reason I am not able to get my build through.
I have tried to:
- Remove all pages from src/app/ except for layout and page.tsx (with page just rendering a plain text block)
- Simplify the layout.tsx to a point of triviality
- Build the app within a container (maybe it's my system?!) - no difference
- Used alternative build options by nextjs, but none lead to a difference
- Researched online but could not get it to work, at this point only the "infinite loop" option from https://nextjs.org/docs/messages/static-page-generation-timeout seem viable - but I can't figure out what would cause it
- At this point my page does not use any getStaticProps or getStaticPaths
- next dev works without issues
My next.config.js is the following, with a few observations:
- staticPageGenerationTimeout even with an hour did not make a difference (and the page is really not that complex, next dev renders this in seconds)
- compress: false, did not make any change even disabling minification through WebPack did not yield any differences
Any help would be greatly appreciated!
I have tried to:
- Remove all pages from src/app/ except for layout and page.tsx (with page just rendering a plain text block)
- Simplify the layout.tsx to a point of triviality
- Build the app within a container (maybe it's my system?!) - no difference
- Used alternative build options by nextjs, but none lead to a difference
- Researched online but could not get it to work, at this point only the "infinite loop" option from https://nextjs.org/docs/messages/static-page-generation-timeout seem viable - but I can't figure out what would cause it
- At this point my page does not use any getStaticProps or getStaticPaths
- next dev works without issues
next build
▲ Next.js 15.3.2
Creating an optimized production build ...
✓ Compiled successfully in 21.0s
Skipping linting
✓ Checking validity of types
✓ Collecting page data
Failed to build /account/notifications/page: /account/notifications (attempt 1 of 3) because it took more than 120 seconds. Retrying again shortly.
Failed to build /account/billing/page: /account/billing (attempt 1 of 3) because it took more than 120 seconds. Retrying again shortly.
Failed to build /account/signup/page: /account/signup (attempt 1 of 3) because it took more than 120 seconds. Retrying again shortly.
Failed to build /account/page: /account (attempt 1 of 3) because it took more than 120 seconds. Retrying again shortly.
Failed to build /privacy/page: /privacy (attempt 1 of 3) because it took more than 120 seconds. Retrying again shortly.
Failed to build /blog/blog-search/page: /blog/blog-search (attempt 1 of 3) because it took more than 120 seconds. Retrying again shortly.
Failed to build /help-center/help-center-article/page: /help-center/help-center-article (attempt 1 of 3) because it took more than 120 seconds. Retrying again shortly.
Failed to build /job-listing/page: /job-listing (attempt 1 of 3) because it took more than 120 seconds. Retrying again shortly.
Failed to build /blog/blog-newsroom/page: /blog/blog-newsroom (attempt 1 of 3) because it took more than 120 seconds. Retrying again shortly.
Failed to build /account/password-reset/page: /account/password-reset (attempt 1 of 3) because it took more than 120 seconds. Retrying again shortly.
Failed to build /_not-found/page: /_not-found (attempt 1 of 3) because it took more than 120 seconds. Retrying again shortly.My next.config.js is the following, with a few observations:
- staticPageGenerationTimeout even with an hour did not make a difference (and the page is really not that complex, next dev renders this in seconds)
- compress: false, did not make any change even disabling minification through WebPack did not yield any differences
/** @type {import('next').NextConfig} */
const nextConfig = {
staticPageGenerationTimeout: 120,
compress: true,
output: 'export',
eslint: {
ignoreDuringBuilds: true,
}
}
module.exports = nextConfigAny help would be greatly appreciated!
18 Replies
Cinnamon TealOP
I had simplified it down to
"use client";
import React from "react";
const IndexPage = (): React.ReactElement => {
return <>test</>;
};
export default IndexPage;Are you using a monorepo, and what’s your OS?
@Anay-208 | Ping in replies Are you using a monorepo, and what’s your OS?
Cinnamon TealOP
Windows and yes.
@Cinnamon Teal Windows and yes.
I commonly get similar errors with monorepo.
Can you first of all try to move it out of monorepo to see if it works?
Can you first of all try to move it out of monorepo to see if it works?
Cinnamon TealOP
Technically I've not split the project in workspaces or anything - so it's basically all just in a single project location
so by "move it out of monorepo" you mean, moving components and stuff into sub-projects, that are loaded as packages - right?
{
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"postbuild": "next-sitemap",
"start": "next start",
"prettier:fix": "prettier './src/**/*.{tsx,ts}' --write",
"eslint:fix": "eslint ./src --fix",
"codeStyle:fix": "npm run prettier:fix && npm run eslint:fix",
"clear-all": "rimraf node_modules .next "
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"browserslist": {
"production": [
">0.5%",
"last 2 versions",
"Firefox ESR",
"not dead",
"not IE 11",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"@azure/msal-browser": "^4.11.0",
"@azure/msal-react": "^3.0.10",
"@date-io/date-fns": "^3.2.1",
"@emotion/cache": "latest",
"@emotion/react": "latest",
"@emotion/styled": "latest",
"@mui/icons-material": "latest",
"@mui/material": "latest",
"@mui/material-nextjs": "latest",
"@mui/x-date-pickers": "latest",
"@mui/system": "^7.1.0",
"jquery": "^3.7.1",
"aos": "^2.3.4",
"card-validator": "^10.0.0",
"date-fns": "^4.1.0",
"formik": "^2.4.5",
"i18next": "^25.2.0",
"i18next-browser-languagedetector": "^8.1.0",
"i18next-http-backend": "^3.0.2",
"jarallax": "^2.1.4",
"next": "^15.3.2",
"next-sitemap": "latest",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-i18next": "^15.5.1",
"react-slick": "^0.30.3",
"react-syntax-highlighter": "^15.5.0",
"slick-carousel": "^1.8.1",
"yup": "^1.3.2"
},
"devDependencies": {
"@babel/core": "^7.23.6",
"@babel/plugin-syntax-flow": "^7.23.3",
"@babel/plugin-transform-react-jsx": "^7.23.4",
"@eslint/compat": "^1.2.9",
"@eslint/js": "9.27.0",
"@types/aos": "^3.0.7",
"@types/node": "latest",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@types/react-slick": "^0.23.13",
"@types/react-syntax-highlighter": "^15.5.0",
"@typescript-eslint/parser": "latest",
"@typescript-eslint/eslint-plugin": "latest",
"typescript-eslint": "8.32.1",
"cross-env": "^7.0.3",
"eslint": "latest",
"eslint-config-next": "15.1.6",
"eslint-config-prettier": "10.0.1",
"eslint-plugin-prettier": "5.2.3",
"eslint-plugin-react": "^7.37.0",
"eslint-plugin-import": "^2.31.0",
"prettier": "^3.1.1",
"rimraf": "^6.0.1",
"typescript": "latest"
}
}so by "move it out of monorepo" you mean, moving components and stuff into sub-projects, that are loaded as packages - right?
Cinnamon TealOP
nextjs/
├── eslint.config.mjs
├── next-env.d.ts
├── next-sitemap.config.js
├── next.config.js
├── package.json
├── tsconfig.json
├── public/
│ ├── robots.txt
│ ├── serviceworker.js (not yet used)
│ ├── sitemap.xml
│ └── assets/
│ └── images/
├── src/
│ ├── i18n.ts
│ ├── manifest.ts
│ ├── navigation.ts (only contains menu links and routes following /app structure)
│ ├── app/
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ ├── page.tsx
│ │ ├── forbidden.tsx
│ │ ├── loading.tsx
│ │ ├── not-found.tsx
│ │ ├── about/
│ │ │ └── page.tsx
│ │ ├── privacy/
│ │ │ └── page.tsx
│ │ ├── privacy/
│ │ │ └── page.tsx
│ │ ├── privacy/
│ │ │ └── page.tsx
│ │ ├── services/
│ │ │ └── design/
│ │ │ └── page.tsx
│ │ └── .../
│ ├── blocks/
│ │ └── [various block folders (legacy, to be replaced with components/views)]/
│ ├── components/
│ │ └──[various component folders (each has 1 or more tsx files inside]/
│ ├── services/
│ │ └── basic.service.ts (so far return only mocks, but for future api usage)
│ ├── svg/
│ │ └── illustrations/*.svg
│ ├── theme/
│ │ ├── index.ts
│ │ ├── palette.ts
│ │ └── shadows.ts
│ ├── types/
│ │ └── *.d.ts
│ └── views/
│ └── [many view folders and files, e.g. BlogArticle, Startup, etc.]
└── .github/
└── workflows/
└── build.ymlno pages/_app.tsx or document.tsx or pages in general
There are 40 pages in general. I've tried removing all of them and just building the layout.tsx and main page.tsx (with an text block) to single out the issue - but it automatically seems to add a _not-found and error page (the build always got stuck in page 2/4)
With all pages it's getting stuck at 2/40, so basically all "non-default" pages - but since there's not logging or other out put it's difficult to pinpoint on the why
With all pages it's getting stuck at 2/40, so basically all "non-default" pages - but since there's not logging or other out put it's difficult to pinpoint on the why
Can you try in WSL?
I commonly face similar issues in native windows
I commonly face similar issues in native windows
Cinnamon TealOP
Issue remains
What’s your nextjs version
Otherwise can you provide min repro repo?
Cinnamon TealOP
15.3.2 - will try to setup a new repo, that I can share. used commercial template as starter, otherwise would have gladly shared the full project
Cinnamon TealOP
I partially found the issue. I've been using
which would load translation files from the public folder and then use functions to interpolate text into the respective language. It seems for some reason, the pre-render of the pages attempted to wait/load the translation - which never came.
import i18nInstance from "i18n"; // Import to initialize i18next
import { I18nextProvider, useTranslation } from "react-i18next";which would load translation files from the public folder and then use functions to interpolate text into the respective language. It seems for some reason, the pre-render of the pages attempted to wait/load the translation - which never came.
It's however odd that a) this fails silently b) it would not just pre-render the scripts to request the translation, but execute this rather when the client is loading the page (as react-i18next would do, to my understanding) - need to reed up on that, but thank you. Stripping down the repo helped me to locate the issue.