Site: transcendent-donut-ed6873.netlify.app
I’m deploying a new Next.js site and have done several similar sites in the past. The deploy runs fine, but no pages load. This is a yarn workspaces repo.
It seems like something has changed recently. I used to be able to use the UI to configure the Next.js plugin for a site, which added the server side rendering functions, etc. Now I can’t find the plugin anymore. My other sites show the plugin installed.
Thanks for your help!
Hi @djghokie75, thanks for posting and welcome.
Since your repo is a yarn workspaces repo kindly check the links below on how to configure your site to work with Netlify.
Also note the build commands for Next.js in the link below.
Thanks.
We are running into the same issue. This seems to be something going wrong on Netlify’s side. After upgrading to the newest NextJS plugin, we are only able to see the index page. Navigating to any other pages results in a 404.
Everything is working as normal when using the NextJS site locally. I also tested deploying to Vercel & everything worked as expected as well.
Thanks but following these instructions still results in the same problem.
I created a new topic with the solution here: Problems deploying Next.js site with Yarn Workspaces monorepo
Hi @mayhul1,
Feel free to manually install the Next.js Runtime:
@hrishikesh I’ve confirmed that the NextJS plugin is installed both locally & via the UI. However, any new deploy previews are still showing a 404 for any page outside of the index. We’re not even seeing our NextJS 404 page. Can you check on our deploy preview (https://6396ec9ee5a7ff5d6cab4d86--practical-noether-a85e03.netlify.app/) to see if NextJS is being installed correctly?
One difference I see is that our current production deploy (which is working properly) is only deployed with “Functions”.
But our deploy preview (which is not working) is deployed with both functions & edge functions.
Hey @mayhul1,
The deploy you’ve linked us to, appears to be a deploy from CLI, so we cannot confirm if Next.js Runtime has been installed correctly or not. However, I do see something wrong:
There are no redirect rules for that deploy:
Which is why the site is not working. The Next.js Runtime adds some rules by itself, and those seem to be missing here.
Could you confirm how you determined that the Runtime is being installed? Is it because of this banner in the UI:
If yes, unfortunately, that banner shows for all deploys on a site that we detect Next.js on - including the ones made from CLI (without actually confirming if it ran for that particular).
Gotcha @hrishikesh , it does seem like the lack of redirects would explain the problem. If the build command is supposed to make sure the redirect rules get included, there seems to be something going wrong during that process.
There are the build logs we see when running netlify build. It says “Using Next.js Runtime - v4.29.2”:
Netlify Build
────────────────────────────────────────────────────────────────
❯ Version
@netlify/build 29.1.1
❯ Flags
dry: false
offline: false
❯ Current directory
/Users/mayhul/Documents/Heartbeat/heartbeat
❯ Config file
/Users/mayhul/Documents/Heartbeat/heartbeat/netlify.toml
❯ Context
production
❯ Using Next.js Runtime - v4.29.2
────────────────────────────────────────────────────────────────
1. @netlify/plugin-nextjs (onPreBuild event)
────────────────────────────────────────────────────────────────
No Next.js cache to restore.
Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
(@netlify/plugin-nextjs onPreBuild completed in 492ms)
──────────────────────────────────────────────────────────────── 2. build.command from netlify.toml
────────────────────────────────────────────────────────────────
$ nx build public-pages --prod
> nx run public-pages:build:production [local cache]
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
info - Checking validity of types
info - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info - Using external babel configuration from /Users/mayhul/Documents/Heartbeat/heartbeat/apps/public-pages/.babelrc
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (3/3)
info - Finalizing page optimization
Page Size First Load JS
┌ ○ / 278 B 445 kB
├ /\_app 0 B 444 kB
├ λ /[slug]/events/[...eventInfo] 612 B 526 kB
├ ○ /404 1.47 kB 446 kB
├ λ /eventFeedback/[eventID] 2.36 kB 452 kB
└ λ /events/[...eventInfo] 606 B 526 kB
- First Load JS shared by all 444 kB
├ chunks/framework-fc1f2e8247ad02c2.js 42.1 kB
├ chunks/main-4e153a4b87ead9db.js 26.1 kB
├ chunks/pages/\_app-07070fb7d44eb385.js 374 kB
├ chunks/webpack-e2c251f8b5b2cd4b.js 1.67 kB
└ css/eec7cc949075249d.css 3.63 kB
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
> NX Successfully ran target build for project public-pages
Nx read the output from the cache instead of running the command for 1 out of 1 tasks.
View logs and run details at https://cloud.nx.app/runs/BRRBm0N8SJ
(build.command completed in 940ms)
──────────────────────────────────────────────────────────────── 3. @netlify/plugin-nextjs (onBuild event)
────────────────────────────────────────────────────────────────
{
functionsDir: '/Users/mayhul/Documents/Heartbeat/heartbeat/.netlify/functions-internal'
}
Patching /Users/mayhul/Documents/Heartbeat/heartbeat/node*modules/next/dist/server/base-server.js
Done
Patching /Users/mayhul/Documents/Heartbeat/heartbeat/node_modules/next/dist/server/next-server.js
Done
Moving static page files to serve from CDN...
Moved 1 files
Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable.
Netlify configuration property "redirects" value changed to [
{ from: '/\_next/static/*', to: '/static/:splat', status: 200 },
{
from: '/\_next/image*',
query: { url: ':url', w: ':width', q: ':quality' },
to: '/\_ipx/w*:width,q\_:quality/:url',
status: 301
},
{ from: '/\_ipx/_', to: '/.netlify/builders/\_ipx', status: 200 },
{ from: '/cache/_', to: '/404.html', status: 404, force: true },
{ from: '/server/_', to: '/404.html', status: 404, force: true },
{ from: '/serverless/_', to: '/404.html', status: 404, force: true },
{ from: '/trace', to: '/404.html', status: 404, force: true },
{ from: '/traces', to: '/404.html', status: 404, force: true },
{
from: '/routes-manifest.json',
to: '/404.html',
status: 404,
force: true
},
{
from: '/build-manifest.json',
to: '/404.html',
status: 404,
force: true
},
{
from: '/prerender-manifest.json',
to: '/404.html',
status: 404,
force: true
},
{
from: '/react-loadable-manifest.json',
to: '/404.html',
status: 404,
force: true
},
{ from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
{
from: '/api/_',
to: '/.netlify/functions/\_\_\_netlify-handler',
status: 200
},
{
from: '/default_profile_pic.png',
to: '/default_profile_pic.png',
conditions: { Cookie: [Array] },
status: 200
},
{
from: '/favicon.ico',
to: '/favicon.ico',
conditions: { Cookie: [Array] },
status: 200
},
{
from: '/_',
to: '/.netlify/functions/**_netlify-handler',
status: 200,
conditions: { Cookie: [Array] },
force: true
},
{
from: '/\_next/data/build/index.json',
to: '/.netlify/functions/_**netlify-handler',
status: 200,
force: false
},
{
from: '/',
to: '/.netlify/functions/**_netlify-handler',
status: 200,
force: false
},
{
from: '/\_next/data/build/eventFeedback/:eventID.json',
to: '/.netlify/functions/_**netlify-handler',
status: 200,
force: false
},
{
from: '/eventFeedback/:eventID',
to: '/.netlify/functions/**_netlify-handler',
status: 200,
force: false
},
{
from: '/\_next/data/build/events/:eventInfo/\*',
to: '/.netlify/functions/_**netlify-handler',
status: 200,
force: false
},
{
from: '/events/:eventInfo/_',
to: '/.netlify/functions/\_\_\_netlify-handler',
status: 200,
force: false
},
{
from: '/\_next/data/build/:slug/events/:eventInfo/_',
to: '/.netlify/functions/**_netlify-handler',
status: 200,
force: false
},
{
from: '/:slug/events/:eventInfo/\*',
to: '/.netlify/functions/_**netlify-handler',
status: 200,
force: false
},
{
from: '/\*',
to: '/.netlify/functions/\_\_\_netlify-handler',
status: 200
}
].
(@netlify/plugin-nextjs onBuild completed in 613ms)
──────────────────────────────────────────────────────────────── 4. Functions bundling
────────────────────────────────────────────────────────────────
Packaging Functions from .netlify/functions-internal directory:
- **_netlify-handler/_**netlify-handler.js
- **_netlify-odb-handler/_**netlify-odb-handler.js
- \_ipx/\_ipx.js
(Functions bundling completed in 8.3s)
──────────────────────────────────────────────────────────────── 5. Edge Functions bundling
────────────────────────────────────────────────────────────────
Packaging Edge Functions from .netlify/edge-functions directory:
- ipx
(Edge Functions bundling completed in 1s)
──────────────────────────────────────────────────────────────── 6. @netlify/plugin-nextjs (onPostBuild event)
────────────────────────────────────────────────────────────────
Next.js cache saved.
(@netlify/plugin-nextjs onPostBuild completed in 318ms)
────────────────────────────────────────────────────────────────
Netlify Build Complete
────────────────────────────────────────────────────────────────
(Netlify Build completed in 12.6s)
Are you using the command netlify deploy --build? If you run netlify build && netlify deploy, it won’t work.