netlify/next-runtime

[Bug]: NextJS server page query param is not an array as expected

ericpias opened this issue · 2 comments

ericpias commented

Summary

I am using NextJs 13.4 with page routing. Using useRouter to get url query params. Specifying a query param twice and expect that param to be an array in code. Using a NextJS prod optimized build locally, it works as expected. When deployed in netlify, the param is a string (comma separated list) in a SERVER page. In a client page it is an array as expected, even when netlify deployed.

I have so far not come up with a work-around so kind of stuck. Need to use a server page here. Thanks.

Fastest replication steps are to deploy my public repo below. Then try the following. It will display the results.
https://your_deploy_id.netlify.app/?testParam=Test123&testParam=Testabc&testParam=890
https://your_deploy_id.netlify.app/clientpage?testParam=Test123&testParam=Testabc&testParam=890

My active deployment is:
https://main--coruscating-starlight-6bfcb7.netlify.app/?testParam=Test123&testParam=Testabc&testParam=890

Which shows:
Server Page
testParam should be a string if only supplied once in the URL query params. Otherwise, it should be an array.
(Server Page) testParam is a string: Test123, Testabc, 890
Client Component
(Client Component) testParam is a string: Test123, Testabc, 890

Whereas
https://main--coruscating-starlight-6bfcb7.netlify.app/clientpage?testParam=Test123&testParam=Testabc&testParam=890

Shows:
Client Page

testParam should be a string if only supplied once in the URL query params. Otherwise, it should be an array.
(Client page) testParam is an array: [Test123, Testabc, 890]
Client Component
(Client Component) testParam is an array: [Test123, Testabc, 890]

A link to a reproduction repository

https://github.com/ericpias/nextjs-query-param-bug

Expected Result

The param specified twice on the url should always be an array.

Actual Result

The param specified twice on the url is a string (comma separated list) in a SERVER page (netlify deployment only).

Steps to reproduce

Deploy the repo above and then hit the two urls above.

Next Runtime version

13.4.8

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

`netlify.toml` 
# Paste content of your `netlify.toml` file here

Your public/_redirects file

`_redirects` 
# Paste content of your `_redirects` file here

Your next.config.js file

/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}

module.exports = nextConfig

Builds logs (or link to your logs)

8:08:16 AM: build-image version: 3ffff9df3d5419545acc1b673a54de348174406d (focal)
8:08:16 AM: buildbot version: b7c750d620b9b2152f8e19c422dafe43d6369c47
8:08:16 AM: Building without cache
8:08:16 AM: Starting to prepare the repo for build
8:08:16 AM: No cached dependencies found. Cloning fresh repo
8:08:16 AM: git clone --filter=blob:none https://github.com/ericpias/nextjs-query-param-bug
8:08:17 AM: Preparing Git Reference refs/heads/main
8:08:18 AM: Starting to install dependencies
8:08:18 AM: Python version set to 3.8
8:08:18 AM: Attempting Ruby version 2.7.2, read from environment
8:08:19 AM: Using Ruby version 2.7.2
8:08:19 AM: Started restoring cached go cache
8:08:19 AM: Finished restoring cached go cache
8:08:20 AM: go version go1.19.13 linux/amd64
8:08:21 AM: Using PHP version 8.0
8:08:22 AM: v18.18.2 is already installed.
8:08:22 AM: Now using node v18.18.2 (npm v9.8.1)
8:08:22 AM: Enabling Node.js Corepack
8:08:22 AM: Started restoring cached build plugins
8:08:22 AM: Finished restoring cached build plugins
8:08:22 AM: Started restoring cached corepack dependencies
8:08:22 AM: Finished restoring cached corepack dependencies
8:08:22 AM: Started restoring cached yarn cache
8:08:22 AM: Finished restoring cached yarn cache
8:08:22 AM: No yarn workspaces detected
8:08:22 AM: Started restoring cached node modules
8:08:22 AM: Finished restoring cached node modules
8:08:23 AM: Installing npm packages using Yarn version 1.22.19
8:08:23 AM: yarn install v1.22.19
8:08:23 AM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
8:08:23 AM: [1/4] Resolving packages...
8:08:23 AM: [2/4] Fetching packages...
8:08:32 AM: [3/4] Linking dependencies...
8:08:34 AM: [4/4] Building fresh packages...
8:08:34 AM: Done in 11.33s.
8:08:34 AM: npm packages installed using Yarn
8:08:35 AM: Successfully installed dependencies
8:08:35 AM: Starting build script
8:08:36 AM: Detected 1 framework(s)
8:08:36 AM: "next" at version "13.4.8"
8:08:36 AM: Section completed: initializing
8:08:37 AM: ​
8:08:37 AM: Netlify Build
8:08:37 AM: ────────────────────────────────────────────────────────────────
8:08:37 AM: ​
8:08:37 AM: ❯ Version
8:08:37 AM: @netlify/build 29.28.2
8:08:37 AM: ​
8:08:37 AM: ❯ Flags
8:08:37 AM: baseRelDir: true
8:08:37 AM: buildId: 6560a03fa9a7b11f62e3ac7b
8:08:37 AM: deployId: 6560a03fa9a7b11f62e3ac7d
8:08:37 AM: ​
8:08:37 AM: ❯ Current directory
8:08:37 AM: /opt/build/repo
8:08:37 AM: ​
8:08:37 AM: ❯ Config file
8:08:37 AM: No config file was defined: using default values.
8:08:37 AM: ​
8:08:37 AM: ❯ Context
8:08:37 AM: production
8:08:37 AM: ​
8:08:37 AM: ❯ Installing plugins
8:08:37 AM: - @netlify/plugin-nextjs@4.41.2
8:08:50 AM: ​
8:08:50 AM: ❯ Using Next.js Runtime - v4.41.2
8:08:51 AM: ​
8:08:51 AM: @netlify/plugin-nextjs (onPreBuild event)
8:08:51 AM: ────────────────────────────────────────────────────────────────
8:08:51 AM: ​
8:08:52 AM: No Next.js cache to restore.
8:08:52 AM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
8:08:52 AM: ​
8:08:52 AM: (@netlify/plugin-nextjs onPreBuild completed in 53ms)
8:08:52 AM: ​
8:08:52 AM: Build command from Netlify app
8:08:52 AM: ────────────────────────────────────────────────────────────────
8:08:52 AM: ​
8:08:52 AM: $ npm run build
8:08:52 AM: > nextjs-query-param-bug@0.1.0 build
8:08:52 AM: > next build
8:08:52 AM: - warn No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
8:08:52 AM: - info Linting and checking validity of types...
8:08:54 AM: - info Creating an optimized production build...
8:08:59 AM: - info Compiled successfully
8:08:59 AM: - info Collecting page data...
8:09:08 AM: - info Generating static pages (0/3)
8:09:08 AM: - info Generating static pages (3/3)
8:09:09 AM: - info Finalizing page optimization...
8:09:10 AM: Route (pages) Size First Load JS
8:09:10 AM: ┌ λ / 842 B 75.5 kB
8:09:10 AM: ├ /_app 0 B 74.6 kB
8:09:10 AM: ├ ○ /404 182 B 74.8 kB
8:09:10 AM: ├ λ /api/hello 0 B 74.6 kB
8:09:10 AM: └ ○ /clientPage 826 B 75.4 kB
8:09:10 AM: + First Load JS shared by all 74.6 kB
8:09:10 AM: ├ chunks/framework-305cb810cde7afac.js 45.2 kB
8:09:10 AM: ├ chunks/main-f21ffcaaeccf56c7.js 28.4 kB
8:09:10 AM: ├ chunks/pages/_app-ae907860a06fe57a.js 296 B
8:09:10 AM: ├ chunks/webpack-8fa1640cc84ba8fe.js 750 B
8:09:10 AM: └ css/ef46db3751d8e999.css 20 B
8:09:10 AM: λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
8:09:10 AM: ○ (Static) automatically rendered as static HTML (uses no initial props)
8:09:10 AM: ​
8:09:10 AM: (build.command completed in 18s)
8:09:10 AM: ​
8:09:10 AM: @netlify/plugin-nextjs (onBuild event)
8:09:10 AM: ────────────────────────────────────────────────────────────────
8:09:10 AM: ​
8:09:10 AM: Moving static page files to serve from CDN...
8:09:10 AM: Moved 3 files to CDN
8:09:10 AM: You are not using Netlify Edge Functions for image format detection. Set env var "NEXT_FORCE_EDGE_IMAGES=true" to enable.
8:09:10 AM: Netlify configuration property "redirects" value changed to [
8:09:10 AM: { from: "/next/static/", to: "/static/:splat", status: 200 },
8:09:10 AM: {
8:09:10 AM: from: "/_next/image",
8:09:10 AM: query: { url: ":url", w: ":width", q: ":quality" },
8:09:10 AM: to: "/ipx/w:width,q:quality/:url",
8:09:10 AM: status: 301
8:09:10 AM: },
8:09:10 AM: { from: "/_ipx/", to: "/.netlify/builders/_ipx", status: 200 },
8:09:10 AM: {
8:09:10 AM: from: "/api/",
8:09:10 AM: to: "/.netlify/functions/___netlify-handler",
8:09:10 AM: status: 200
8:09:10 AM: },
8:09:10 AM: {
8:09:10 AM: from: "/favicon.ico",
8:09:10 AM: to: "/favicon.ico",
8:09:10 AM: conditions: { Cookie: [Array] },
8:09:10 AM: status: 200
8:09:10 AM: },
8:09:10 AM: {
8:09:10 AM: from: "/next.svg",
8:09:10 AM: to: "/next.svg",
8:09:10 AM: conditions: { Cookie: [Array] },
8:09:10 AM: status: 200
8:09:10 AM: },
8:09:10 AM: {
8:09:10 AM: from: "/vercel.svg",
8:09:10 AM: to: "/vercel.svg",
8:09:10 AM: conditions: { Cookie: [Array] },
8:09:10 AM: status: 200
8:09:10 AM: },
8:09:10 AM: {
8:09:10 AM: from: "/",
8:09:10 AM: to: "/.netlify/functions/___netlify-handler",
8:09:10 AM: status: 200,
8:09:10 AM: conditions: { Cookie: [Array] },
8:09:10 AM: force: true
8:09:10 AM: },
8:09:10 AM: {
8:09:10 AM: from: "/_next/data/GdyTnrez3sPUYAFlqE8im/index.json",
8:09:10 AM: to: "/.netlify/functions/___netlify-handler",
8:09:10 AM: status: 200,
8:09:10 AM: force: false
8:09:10 AM: },
8:09:10 AM: {
8:09:10 AM: from: "/",
8:09:10 AM: to: "/.netlify/functions/___netlify-handler",
8:09:10 AM: status: 200,
8:09:10 AM: force: false
8:09:10 AM: },
8:09:10 AM: {
8:09:10 AM: from: "/_next/data/GdyTnrez3sPUYAFlqE8im/clientPage.json",
8:09:10 AM: to: "/.netlify/functions/___netlify-handler",
8:09:10 AM: status: 200,
8:09:10 AM: force: false
8:09:10 AM: },
8:09:10 AM: {
8:09:10 AM: from: "/clientPage",
8:09:10 AM: to: "/.netlify/functions/___netlify-handler",
8:09:10 AM: status: 200,
8:09:10 AM: force: false
8:09:10 AM: },
8:09:10 AM: {
8:09:10 AM: from: "/",
8:09:10 AM: to: "/.netlify/functions/___netlify-handler",
8:09:10 AM: status: 200
8:09:10 AM: }
8:09:10 AM: ].
8:09:10 AM: ​
8:09:10 AM: (@netlify/plugin-nextjs onBuild completed in 409ms)
8:09:10 AM: ​
8:09:10 AM: Functions bundling
8:09:10 AM: ────────────────────────────────────────────────────────────────
8:09:10 AM: ​
8:09:10 AM: Packaging Functions from .netlify/functions-internal directory:
8:09:10 AM: - ___netlify-handler/___netlify-handler.js
8:09:10 AM: - ___netlify-odb-handler/___netlify-odb-handler.js
8:09:10 AM: - _ipx/_ipx.js
8:09:10 AM: ​
8:09:42 AM: ​
8:09:42 AM: (Functions bundling completed in 31.5s)
8:09:42 AM: ​
8:09:42 AM: Edge Functions bundling
8:09:42 AM: ────────────────────────────────────────────────────────────────
8:09:42 AM: ​
8:09:43 AM: ​
8:09:43 AM: (Edge Functions bundling completed in 1.7s)
8:09:43 AM: ​
8:09:43 AM: @netlify/plugin-nextjs (onPostBuild event)
8:09:43 AM: ────────────────────────────────────────────────────────────────
8:09:43 AM: ​
8:09:43 AM: Next.js cache saved.
8:09:43 AM: 🧪 Thank you for testing "appDir" support on Netlify. For known issues and to give feedback, visit https://ntl.fyi/next-13-feedback
8:09:43 AM: ​
8:09:43 AM: (@netlify/plugin-nextjs onPostBuild completed in 48ms)
8:09:43 AM: ​
8:09:43 AM: Deploy site
8:09:43 AM: ────────────────────────────────────────────────────────────────
8:09:43 AM: ​
8:09:43 AM: Starting to deploy site from ".next"
8:09:43 AM: Calculating files to upload
8:09:44 AM: 4 new files to upload
8:09:44 AM: 2 new functions to upload
8:09:51 AM: Post processing done
8:09:51 AM: Section completed: postprocessing
8:09:51 AM: Starting post processing
8:09:51 AM: Skipping form detection
8:09:51 AM: Post processing - header rules
8:09:51 AM: Post processing - redirect rules
8:09:51 AM: Section completed: deploying
8:09:51 AM: Site deploy was successfully initiated
8:09:51 AM: ​
8:09:51 AM: (Deploy site completed in 7.3s)
8:09:51 AM: ​
8:09:51 AM: Netlify Build Complete
8:09:51 AM: ────────────────────────────────────────────────────────────────
8:09:51 AM: ​
8:09:51 AM: (Netlify Build completed in 1m 13.7s)
8:09:52 AM: Site is live ✨
8:09:52 AM: Caching artifacts
8:09:52 AM: Started saving node modules
8:09:52 AM: Finished saving node modules
8:09:52 AM: Started saving build plugins
8:09:52 AM: Finished saving build plugins
8:09:52 AM: Started saving corepack cache
8:09:52 AM: Finished saving corepack cache
8:09:52 AM: Started saving yarn cache
8:09:52 AM: Finished saving yarn cache
8:09:52 AM: Started saving pip cache
8:09:52 AM: Finished saving pip cache
8:09:52 AM: Started saving emacs cask dependencies
8:09:52 AM: Finished saving emacs cask dependencies
8:09:52 AM: Started saving maven dependencies
8:09:52 AM: Finished saving maven dependencies
8:09:52 AM: Started saving boot dependencies
8:09:52 AM: Finished saving boot dependencies
8:09:52 AM: Started saving rust rustup cache
8:09:52 AM: Finished saving rust rustup cache
8:09:52 AM: Started saving go dependencies
8:09:52 AM: Finished saving go dependencies
8:10:12 AM: Build script success
8:10:12 AM: Section completed: building
8:10:15 AM: Uploading Cache of size 754.9MB
8:10:20 AM: Section completed: cleanup
8:10:20 AM: Finished processing build request in 2m3.602s

Function logs

Function logs 
# Paste logs here

.next JSON files

generated .next JSON files 
# Paste file contents here. Please check there isn't any private info in them
# You can either build locally, or download the deploy from Netlify by clicking the arrow next to the deploy time.
pozhega commented

@ericpias Have you managed to solve this issue? I have the same problem but using Next.js 12.3.1.