Hi all,
I have a NextJS blog and I tried to add pagination.
On localhost, all works flawlessly but the preview shows Error 500.
No errors on the deploy log:
7:25:09 AM: build-image version: ecdc8b770f4a0193fd3f258c1bc6029e681813a4 (focal)
7:25:09 AM: buildbot version: 16ead92caa9f8e177f18ab47e138c7dc936e93d8
7:25:09 AM: Fetching cached dependencies
7:25:09 AM: Starting to download cache of 811.2MB
7:25:11 AM: Finished downloading cache in 2.025s
7:25:11 AM: Starting to extract cache
7:25:19 AM: Finished extracting cache in 7.244s
7:25:19 AM: Finished fetching cache in 9.347s
7:25:19 AM: Starting to prepare the repo for build
7:25:19 AM: Preparing Git Reference pull/80/head
7:25:21 AM: Starting to install dependencies
7:25:21 AM: Python version set to 3.8
7:25:21 AM: Attempting Ruby version 2.7.2, read from environment
7:25:22 AM: Using Ruby version 2.7.2
7:25:23 AM: Started restoring cached go cache
7:25:23 AM: Finished restoring cached go cache
7:25:24 AM: go version go1.19.13 linux/amd64
7:25:24 AM: Using PHP version 8.0
7:25:26 AM: Started restoring cached Node.js version
7:25:31 AM: Finished restoring cached Node.js version
7:25:31 AM: v18.20.4 is already installed.
7:25:31 AM: Now using node v18.20.4 (npm v10.7.0)
7:25:31 AM: Enabling Node.js Corepack
7:25:31 AM: Started restoring cached build plugins
7:25:31 AM: Finished restoring cached build plugins
7:25:31 AM: Started restoring cached corepack dependencies
7:25:31 AM: Finished restoring cached corepack dependencies
7:25:31 AM: No npm workspaces detected
7:25:31 AM: Started restoring cached node modules
7:25:31 AM: Finished restoring cached node modules
7:25:32 AM: Installing npm packages using npm version 10.7.0
7:25:32 AM: npm warn EBADENGINE Unsupported engine {
7:25:32 AM: npm warn EBADENGINE package: 'react-lottie@1.2.4',
7:25:32 AM: npm warn EBADENGINE required: { npm: '^3.0.0' },
7:25:32 AM: npm warn EBADENGINE current: { node: 'v18.20.4', npm: '10.7.0' }
7:25:32 AM: npm warn EBADENGINE }
7:25:33 AM: up to date, audited 582 packages in 1s
7:25:33 AM: 206 packages are looking for funding
7:25:33 AM: run `npm fund` for details
7:25:33 AM: 2 vulnerabilities (1 moderate, 1 high)
7:25:33 AM: To address all issues, run:
7:25:33 AM: npm audit fix
7:25:33 AM: Run `npm audit` for details.
7:25:33 AM: npm packages installed
7:25:34 AM: Successfully installed dependencies
7:25:34 AM: Starting build script
7:25:35 AM: Detected 1 framework(s)
7:25:35 AM: "next" at version "14.2.4"
7:25:35 AM: Section completed: initializing
7:25:36 AM:
7:25:36 AM: Netlify Build
7:25:36 AM: ────────────────────────────────────────────────────────────────
7:25:36 AM:
7:25:36 AM: ❯ Version
7:25:36 AM: @netlify/build 29.54.2
7:25:36 AM:
7:25:36 AM: ❯ Flags
7:25:36 AM: accountId: 5f44eaaa05afac010bf452e8
7:25:36 AM: baseRelDir: true
7:25:36 AM: buildId: 66e7c12967fc2e0008ec6540
7:25:36 AM: deployId: 66e7c12967fc2e0008ec6542
7:25:36 AM:
7:25:36 AM: ❯ Current directory
7:25:36 AM: /opt/build/repo
7:25:36 AM:
7:25:36 AM: ❯ Config file
7:25:36 AM: No config file was defined: using default values.
7:25:36 AM:
7:25:36 AM: ❯ Context
7:25:36 AM: deploy-preview
7:25:37 AM:
7:25:37 AM: ❯ Using Next.js Runtime - v5.7.1
7:25:39 AM: Next.js cache restored
7:25:39 AM:
7:25:39 AM: Build command from Netlify app
7:25:39 AM: ────────────────────────────────────────────────────────────────
7:25:39 AM:
7:25:39 AM: $ npm run build
7:25:39 AM: > permit13@0.1.0 build
7:25:39 AM: > next build
7:25:40 AM: ▲ Next.js 14.2.4
7:25:40 AM: Creating an optimized production build ...
7:25:53 AM: ✓ Compiled successfully
7:25:53 AM: Linting and checking validity of types ...
7:25:55 AM: ./components/layout/ProductHuntButton.tsx
7:25:55 AM: 7:7 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
7:25:55 AM: ./components/layout/ProductHuntVoteButton.tsx
7:25:55 AM: 4:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
7:25:55 AM: info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
7:25:55 AM: Collecting page data ...
7:25:59 AM: Generating static pages (0/32) ...
7:25:59 AM: Generating static pages (8/32)
7:26:00 AM: Generating static pages (16/32)
7:26:00 AM: Generating static pages (24/32)
7:26:00 AM: ✓ Generating static pages (32/32)
7:26:00 AM: Finalizing page optimization ...
7:26:00 AM: Collecting build traces ...
7:26:09 AM: Route (app) Size First Load JS
7:26:09 AM: ┌ ○ / 1.52 MB 1.76 MB
7:26:09 AM: ├ ○ /_not-found 151 B 87.9 kB
7:26:09 AM: ├ ƒ /[...not_found] 316 B 88 kB
7:26:09 AM: ├ ○ /abac 3.38 kB 159 kB
7:26:09 AM: ├ ○ /about 12.2 kB 113 kB
7:26:09 AM: ├ ○ /assets/api/icon1-lq5zkg.svg 0 B 0 B
7:26:09 AM: ├ ○ /assets/api/icon2-lq5zkg.svg 0 B 0 B
7:26:09 AM: ├ ○ /assets/api/icon3-lq5zkg.svg 0 B 0 B
7:26:09 AM: ├ ○ /assets/control/icon1-15uhhe.svg 0 B 0 B
7:26:09 AM: ├ ○ /assets/control/icon2-15uhhe.svg 0 B 0 B
7:26:09 AM: ├ ○ /assets/control/icon3-15uhhe.svg 0 B 0 B
7:26:09 AM: ├ ○ /assets/control/icon4-15uhhe.svg 0 B 0 B
7:26:09 AM: ├ ○ /assets/hybrid/icon1-uitaig.svg 0 B 0 B
7:26:09 AM: ├ ○ /assets/hybrid/icon2-uitaig.svg 0 B 0 B
7:26:09 AM: ├ ○ /assets/hybrid/icon3-uitaig.svg 0 B 0 B
7:26:09 AM: ├ ƒ /author/[slug] 190 B 99.8 kB
7:26:09 AM: ├ ƒ /blog 293 B 99.9 kB
7:26:09 AM: ├ ƒ /blog/[slug] 77.1 kB 269 kB
7:26:09 AM: ├ ○ /career 1.96 kB 102 kB
7:26:09 AM: ├ ƒ /career/[slug] 4.87 kB 113 kB
7:26:09 AM: ├ ○ /elements 6.53 kB 181 kB
7:26:09 AM: ├ ○ /foaz 3.59 kB 111 kB
7:26:09 AM: ├ ○ /foaz/opengraph-image.png 0 B 0 B
7:26:09 AM: ├ ƒ /legal/[slug] 150 B 87.9 kB
7:26:09 AM: ├ ○ /open-source 374 B 93.2 kB
7:26:09 AM: ├ ○ /opengraph-image.png 0 B 0 B
7:26:09 AM: ├ ○ /pricing 6.63 kB 188 kB
7:26:09 AM: ├ ○ /producthunt 28 kB 200 kB
7:26:09 AM: ├ ○ /rbac 10.5 kB 189 kB
7:26:09 AM: ├ ○ /rebac 12.2 kB 168 kB
7:26:09 AM: ├ ○ /share-if 6.05 kB 133 kB
7:26:09 AM: ├ ○ /share-if/assets/town-section/icon.svg 0 B 0 B
7:26:09 AM: ├ ○ /sitemap.xml 0 B 0 B
7:26:09 AM: ├ ƒ /tags/[slug] 293 B 99.9 kB
7:26:09 AM: └ ○ /videos 448 B 134 kB
7:26:09 AM: + First Load JS shared by all 87.7 kB
7:26:09 AM: ├ chunks/7023-6acd06d6264f07ff.js 31.7 kB
7:26:09 AM: ├ chunks/fd9d1056-f87b45cbc9b2ebcc.js 53.6 kB
7:26:09 AM: └ other shared chunks (total) 2.41 kB
7:26:09 AM: ○ (Static) prerendered as static content
7:26:09 AM: ƒ (Dynamic) server-rendered on demand
7:26:09 AM:
7:26:09 AM: (build.command completed in 30s)
7:26:09 AM: Next.js cache saved
7:26:10 AM:
7:26:10 AM: Functions bundling
7:26:10 AM: ────────────────────────────────────────────────────────────────
7:26:10 AM:
7:26:10 AM: Packaging Functions from .netlify/functions-internal directory:
7:26:10 AM: - ___netlify-server-handler/___netlify-server-handler.mjs
7:26:10 AM:
7:26:12 AM:
7:26:12 AM: (Functions bundling completed in 2s)
7:26:13 AM:
7:26:13 AM: Deploy site
7:26:13 AM: ────────────────────────────────────────────────────────────────
7:26:13 AM:
7:26:13 AM: Starting to deploy site from '.next'
7:26:13 AM: Calculating files to upload
7:26:16 AM: 0 new file(s) to upload
7:26:16 AM: 1 new function(s) to upload
7:26:24 AM: Skipping form detection
7:26:24 AM: Post processing - header rules
7:26:24 AM: Starting post processing
7:26:24 AM: Post processing - redirect rules
7:26:24 AM: Post processing done
7:26:24 AM: Section completed: postprocessing
7:26:24 AM: Site is live ✨
7:26:24 AM: Section completed: deploying
7:26:26 AM: Finished waiting for live deploy in 2.189s
7:26:26 AM: Site deploy was successfully initiated
7:26:26 AM:
7:26:26 AM: (Deploy site completed in 12.6s)
7:26:29 AM:
7:26:29 AM: Netlify Build Complete
7:26:29 AM: ────────────────────────────────────────────────────────────────
7:26:29 AM:
7:26:29 AM: (Netlify Build completed in 52.8s)
7:26:30 AM: Caching artifacts
7:26:30 AM: Started saving node modules
7:26:30 AM: Finished saving node modules
7:26:30 AM: Started saving build plugins
7:26:30 AM: Finished saving build plugins
7:26:30 AM: Started saving corepack cache
7:26:30 AM: Finished saving corepack cache
7:26:30 AM: Started saving pip cache
7:26:30 AM: Finished saving pip cache
7:26:30 AM: Started saving emacs cask dependencies
7:26:30 AM: Finished saving emacs cask dependencies
7:26:30 AM: Started saving maven dependencies
7:26:30 AM: Finished saving maven dependencies
7:26:30 AM: Started saving boot dependencies
7:26:30 AM: Finished saving boot dependencies
7:26:30 AM: Started saving rust rustup cache
7:26:30 AM: Finished saving rust rustup cache
7:26:30 AM: Started saving go dependencies
7:26:30 AM: Finished saving go dependencies
7:26:30 AM: Build script success
7:26:30 AM: Section completed: building
7:27:16 AM: Uploading Cache of size 810.7MB
7:27:18 AM: Section completed: cleanup
7:27:18 AM: Finished processing build request in 2m8.397s
Here is the preview (on the console and in the network tab I have an error):
Console error:
Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
The code that I changed on this branch:
package.json:
"@netlify/next": "^1.4.7",
"@netlify/plugin-nextjs": "5.7.1",
"next": "^14.2.4",
Please let me know if any info is missing.
Any help will be appreciated, thanks!
