netlify/next-runtime

[Bug]: Server actions not working with static rendering on Netlify

vlaforet opened this issue · 3 comments

vlaforet commented

Summary

When a page is rendered statically (e.g. a simple form) server actions won't work.
Only happens on Netlify. It works as expected on Vercel and locally.

Specifying export const dynamic = 'force-dynamic'; forces the page to be dynamically rendered and fixes the issue.

Same issue reported: https://answers.netlify.com/t/issue-with-next-js-14-server-actions-on-netlify-404-error-on-post-request/107257
Possibly related to that issue being resolved: vercel/next.js#52840

A link to a reproduction repository

https://github.com/vlaforet/nextjs-actions-static-reproduction

Expected Result

On submit the user should be redirected to a not-found page to show the server action has been executed.
Can be tried here: https://nextjs-actions-static-reproduction.vercel.app/

Actual Result

On submit nothing happens. Looking at the Devtools Network Panel we can see a POST request resulting in a 404 from the server.
Can be tried here: https://main--wonderful-cactus-83eea1.netlify.app/

Steps to reproduce

  1. Go to https://main--wonderful-cactus-83eea1.netlify.app/
  2. Click on Submit
  3. Nothing happens
  4. Try the same thing on https://nextjs-actions-static-reproduction.vercel.app/
  5. You get redirected to /not-found

Next Runtime version

4.41.3

Is your issue related to the app directory?

  • Yes, I am using the app directory

More information about your build

  • I am building using the CLI
  • I am building using file-based configuration (netlify.toml)

What OS are you using?

None

Your netlify.toml file

No response

Your public/_redirects file

No response

Your next.config.js file

`next.config.js` 
/** @type {import("next").NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

module.exports = nextConfig;```

</details>


### Builds logs (or link to your logs)

<details>
  <summary>Build logs</summary>

12:30:08 AM: build-image version: fcb0c1b3ada6d25c1cb58e8bc514f5f23cc14f15 (focal)
12:30:08 AM: buildbot version: 49ecf0adacab23d70a4d23075512622658347619
12:30:08 AM: Fetching cached dependencies
12:30:08 AM: Starting to download cache of 176.4MB
12:30:10 AM: Finished downloading cache in 1.6s
12:30:10 AM: Starting to extract cache
12:30:11 AM: Finished extracting cache in 1.459s
12:30:11 AM: Finished fetching cache in 3.116s
12:30:11 AM: Starting to prepare the repo for build
12:30:11 AM: Preparing Git Reference refs/heads/main
12:30:13 AM: Starting to install dependencies
12:30:13 AM: Python version set to 3.8
12:30:13 AM: Attempting Ruby version 2.7.2, read from environment
12:30:13 AM: Using Ruby version 2.7.2
12:30:14 AM: Started restoring cached go cache
12:30:14 AM: Finished restoring cached go cache
12:30:15 AM: go version go1.19.13 linux/amd64
12:30:15 AM: Using PHP version 8.0
12:30:16 AM: Started restoring cached Node.js version
12:30:17 AM: Finished restoring cached Node.js version
12:30:17 AM: v18.19.0 is already installed.
12:30:18 AM: Now using node v18.19.0 (npm v10.2.3)
12:30:18 AM: Enabling Node.js Corepack
12:30:18 AM: Started restoring cached build plugins
12:30:18 AM: Finished restoring cached build plugins
12:30:18 AM: Started restoring cached corepack dependencies
12:30:18 AM: Finished restoring cached corepack dependencies
12:30:18 AM: No npm workspaces detected
12:30:18 AM: Started restoring cached node modules
12:30:18 AM: Finished restoring cached node modules
12:30:18 AM: Installing npm packages using npm version 10.2.3
12:30:19 AM: up to date, audited 28 packages in 378ms
12:30:19 AM: 3 packages are looking for funding
12:30:19 AM: run npm fund for details
12:30:19 AM: found 0 vulnerabilities
12:30:19 AM: npm packages installed
12:30:19 AM: Successfully installed dependencies
12:30:19 AM: Starting build script
12:30:20 AM: Detected 1 framework(s)
12:30:20 AM: "next" at version "14.1.1-canary.20"
12:30:20 AM: Section completed: initializing
12:30:21 AM: ​
12:30:21 AM: Netlify Build
12:30:21 AM: ────────────────────────────────────────────────────────────────
12:30:21 AM: ​
12:30:21 AM: ❯ Version
12:30:21 AM: @netlify/build 29.33.2
12:30:21 AM: ​
12:30:21 AM: ❯ Flags
12:30:21 AM: baseRelDir: true
12:30:21 AM: buildId: 65b834ffdcbcbc0008a546da
12:30:21 AM: deployId: 65b834ffdcbcbc0008a546dc
12:30:21 AM: ​
12:30:21 AM: ❯ Current directory
12:30:21 AM: /opt/build/repo
12:30:21 AM: ​
12:30:21 AM: ❯ Config file
12:30:21 AM: No config file was defined: using default values.
12:30:21 AM: ​
12:30:21 AM: ❯ Context
12:30:21 AM: production
12:30:21 AM: ​
12:30:21 AM: ❯ Using Next.js Runtime - v4.41.3
12:30:23 AM: ​
12:30:23 AM: @netlify/plugin-nextjs (onPreBuild event)
12:30:23 AM: ────────────────────────────────────────────────────────────────
12:30:23 AM: ​
12:30:23 AM: Next.js cache restored.
12:30:23 AM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
12:30:23 AM: ​
12:30:23 AM: (@netlify/plugin-nextjs onPreBuild completed in 126ms)
12:30:23 AM: ​
12:30:23 AM: Build command from Netlify app
12:30:23 AM: ────────────────────────────────────────────────────────────────
12:30:23 AM: ​
12:30:23 AM: $ npm run build
12:30:23 AM: > build
12:30:23 AM: > next build
12:30:23 AM: ▲ Next.js 14.1.1-canary.20
12:30:23 AM: Creating an optimized production build ...
12:30:27 AM: ✓ Compiled successfully
12:30:27 AM: Linting and checking validity of types ...
12:30:28 AM: Collecting page data ...
12:30:29 AM: Generating static pages (0/4) ...
12:30:29 AM: Generating static pages (1/4)
12:30:29 AM: Generating static pages (2/4)
12:30:29 AM: Generating static pages (3/4)
12:30:29 AM: ✓ Generating static pages (4/4)
12:30:30 AM: Finalizing page optimization ...
12:30:30 AM: Collecting build traces ...
12:30:33 AM: Route (app) Size First Load JS
12:30:33 AM: ┌ ○ / 141 B 85.1 kB
12:30:33 AM: └ ○ /_not-found 882 B 85.8 kB
12:30:33 AM: + First Load JS shared by all 85 kB
12:30:33 AM: ├ chunks/54-4fc04acbb899de2e.js 29.7 kB
12:30:33 AM: ├ chunks/fd9d1056-9e0d44545602dadc.js 53.4 kB
12:30:33 AM: └ other shared chunks (total) 1.84 kB
12:30:33 AM: ○ (Static) prerendered as static content
12:30:33 AM: ​
12:30:33 AM: (build.command completed in 9.9s)
12:30:33 AM: ​
12:30:33 AM: @netlify/plugin-nextjs (onBuild event)
12:30:33 AM: ────────────────────────────────────────────────────────────────
12:30:33 AM: ​
12:30:33 AM: Moving static page files to serve from CDN...
12:30:33 AM: Moved 6 files to CDN
12:30:33 AM: You are not using Netlify Edge Functions for image format detection. Set env var "NEXT_FORCE_EDGE_IMAGES=true" to enable.
12:30:33 AM: Netlify configuration property "redirects" value changed to [
12:30:33 AM: { from: "/next/static/", to: "/static/:splat", status: 200 },
12:30:33 AM: {
12:30:33 AM: from: "/_next/image",
12:30:33 AM: query: { url: ":url", w: ":width", q: ":quality" },
12:30:33 AM: to: "/ipx/w:width,q:quality/:url",
12:30:33 AM: status: 301
12:30:33 AM: },
12:30:33 AM: { from: "/_ipx/", to: "/.netlify/builders/_ipx", status: 200 },
12:30:33 AM: {
12:30:33 AM: from: "/api/",
12:30:33 AM: to: "/.netlify/functions/___netlify-handler",
12:30:33 AM: status: 200
12:30:33 AM: },
12:30:33 AM: {
12:30:33 AM: from: "/favicon.ico",
12:30:33 AM: to: "/favicon.ico",
12:30:33 AM: conditions: { Cookie: [Array] },
12:30:33 AM: status: 200
12:30:33 AM: },
12:30:33 AM: {
12:30:33 AM: from: "/",
12:30:33 AM: to: "/.netlify/functions/___netlify-handler",
12:30:33 AM: status: 200,
12:30:33 AM: conditions: { Cookie: [Array] },
12:30:33 AM: force: true
12:30:33 AM: },
12:30:33 AM: {
12:30:33 AM: from: "/_next/data/fFCZFikSrRJRFwwgpevJ0/_not-found.json",
12:30:33 AM: to: "/.netlify/functions/___netlify-handler",
12:30:33 AM: status: 200,
12:30:33 AM: force: false
12:30:33 AM: },
12:30:33 AM: {
12:30:33 AM: from: "/_not-found",
12:30:33 AM: to: "/.netlify/functions/___netlify-handler",
12:30:33 AM: status: 200,
12:30:33 AM: force: false
12:30:33 AM: },
12:30:33 AM: {
12:30:33 AM: from: "/",
12:30:33 AM: to: "/.netlify/functions/___netlify-handler",
12:30:33 AM: status: 200
12:30:33 AM: }
12:30:33 AM: ].
12:30:33 AM: ​
12:30:33 AM: (@netlify/plugin-nextjs onBuild completed in 202ms)
12:30:33 AM: ​
12:30:33 AM: Functions bundling
12:30:33 AM: ────────────────────────────────────────────────────────────────
12:30:33 AM: ​
12:30:33 AM: Packaging Functions from .netlify/functions-internal directory:
12:30:33 AM: - ___netlify-handler/___netlify-handler.js
12:30:33 AM: - ___netlify-odb-handler/___netlify-odb-handler.js
12:30:33 AM: - _ipx/_ipx.js
12:30:33 AM: ​
12:30:55 AM: ​
12:30:55 AM: (Functions bundling completed in 22.1s)
12:30:55 AM: ​
12:30:55 AM: Edge Functions bundling
12:30:55 AM: ────────────────────────────────────────────────────────────────
12:30:55 AM: ​
12:30:55 AM: Packaging Edge Functions from .netlify/edge-functions directory:
12:30:55 AM: - rsc-data
12:30:55 AM: ​
12:30:55 AM: (Edge Functions bundling completed in 371ms)
12:30:55 AM: ​
12:30:55 AM: @netlify/plugin-nextjs (onPostBuild event)
12:30:55 AM: ────────────────────────────────────────────────────────────────
12:30:55 AM: ​
12:30:55 AM: Next.js cache saved.
12:30:55 AM: ​
12:30:55 AM: (@netlify/plugin-nextjs onPostBuild completed in 72ms)
12:30:55 AM: ​
12:30:55 AM: Deploy site
12:30:55 AM: ────────────────────────────────────────────────────────────────
12:30:55 AM: ​
12:30:55 AM: Starting to deploy site from ".next"
12:30:56 AM: Calculating files to upload
12:30:56 AM: 8 new files to upload
12:30:56 AM: 2 new functions to upload
12:31:03 AM: Starting post processing
12:31:03 AM: Post processing - redirect rules
12:31:03 AM: Post processing done
12:31:03 AM: Section completed: postprocessing
12:31:03 AM: Skipping form detection
12:31:03 AM: Post processing - header rules
12:31:03 AM: Section completed: deploying
12:31:03 AM: Site deploy was successfully initiated
12:31:03 AM: ​
12:31:03 AM: (Deploy site completed in 7.4s)
12:31:03 AM: ​
12:31:03 AM: Netlify Build Complete
12:31:03 AM: ────────────────────────────────────────────────────────────────
12:31:03 AM: ​
12:31:03 AM: (Netlify Build completed in 41.9s)
12:31:04 AM: Site is live ✨
12:31:04 AM: Caching artifacts
12:31:04 AM: Started saving node modules
12:31:04 AM: Finished saving node modules
12:31:04 AM: Started saving build plugins
12:31:04 AM: Finished saving build plugins
12:31:04 AM: Started saving corepack cache
12:31:04 AM: Finished saving corepack cache
12:31:04 AM: Started saving pip cache
12:31:04 AM: Finished saving pip cache
12:31:04 AM: Started saving emacs cask dependencies
12:31:04 AM: Finished saving emacs cask dependencies
12:31:04 AM: Started saving maven dependencies
12:31:04 AM: Finished saving maven dependencies
12:31:04 AM: Started saving boot dependencies
12:31:04 AM: Finished saving boot dependencies
12:31:04 AM: Started saving rust rustup cache
12:31:04 AM: Finished saving rust rustup cache
12:31:04 AM: Started saving go dependencies
12:31:04 AM: Finished saving go dependencies
12:31:04 AM: Build script success
12:31:04 AM: Section completed: building
12:31:05 AM: Uploading Cache of size 176.4MB
12:31:06 AM: Section completed: cleanup
12:31:06 AM: Finished processing build request in 57.86s```

Function logs

No response

.next JSON files

No response

MarcL commented

Hey @vlaforet!

The team at Netlify have now released the new v5 Next.js runtime which has support for both pages and app router, on-demand and time-based revalidation, automatic fine-grained cache control, improved monorepo support, and automatic image optimization using Netlify's image CDN.

Can you try this version, please?

You can find the documentation and additional information on the v5 runtime here: Next.js on Netlify

The v4 runtime is now in the maintenance support phase, with no new features being added. Occasional bug fixes and security patches will be applied when needed.

Thanks!

vlaforet commented

Hi,

Using next-runtime v5 does solve this issue. Thank you!

  • 🎉2
MarcL commented

Great news @vlaforet! 🎉