Unable to properly deploy Next.js

Support
,
1

hello,
my site id is: 4213cee1-1920-4d7c-818a-a8dcd995ed44,
my site name is: overcomewchrist ( overcomewchrist.netlify.app).

My problem is that I keep getting the netlify 404 page when deploying my Next.js site.

Screenshot 2023-06-06 at 08.49.06
Screenshot 2023-06-06 at 08.49.062134Γ—1714 221 KB

Here is my netlify.toml file:

[build]
  command = "next build"
  publish = ".next"
[build.processing]
  skip_processing = false
[build.processing.css]
  bundle = true
  minify = true
[build.processing.js]
  bundle = true
  minify = true

Here’s the deploy logs:


8:38:25 AM: build-image version: 4a78b4474c4e90e8752839579cf887906c3805af (focal)
8:38:25 AM: buildbot version: 4a78b4474c4e90e8752839579cf887906c3805af
8:38:26 AM: Fetching cached dependencies
8:38:26 AM: Starting to download cache of 266.0MB
8:38:28 AM: Finished downloading cache in 2.16s
8:38:28 AM: Starting to extract cache
8:38:30 AM: Finished extracting cache in 1.956s
8:38:30 AM: Finished fetching cache in 4.182s
8:38:30 AM: Starting to prepare the repo for build
8:38:30 AM: Preparing Git Reference refs/heads/shop_updates
8:38:31 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: '.next' versus '' in the Netlify UI
8:38:32 AM: Starting to install dependencies
8:38:32 AM: Python version set to 3.8
8:38:32 AM: Attempting Ruby version 2.7.2, read from environment
8:38:33 AM: Using Ruby version 2.7.2
8:38:33 AM: Started restoring cached go cache
8:38:33 AM: Finished restoring cached go cache
8:38:33 AM: Installing Go version 1.17 (requested 1.17)
8:38:37 AM: go version go1.17 linux/amd64
8:38:38 AM: Using PHP version 8.0
8:38:38 AM: Started restoring cached Node.js version
8:38:39 AM: Finished restoring cached Node.js version
8:38:39 AM: v16.20.0 is already installed.
8:38:40 AM: Now using node v16.20.0 (npm v8.19.4)
8:38:40 AM: Enabling Node.js Corepack
8:38:40 AM: Started restoring cached build plugins
8:38:40 AM: Finished restoring cached build plugins
8:38:40 AM: Started restoring cached corepack dependencies
8:38:40 AM: Finished restoring cached corepack dependencies
8:38:40 AM: No npm workspaces detected
8:38:40 AM: Started restoring cached node modules
8:38:40 AM: Finished restoring cached node modules
8:38:40 AM: Installing npm packages using npm version 8.19.4
8:38:41 AM: removed 115 packages, and audited 453 packages in 804ms
8:38:41 AM: 123 packages are looking for funding
8:38:41 AM:   run `npm fund` for details
8:38:41 AM: found 0 vulnerabilities
8:38:41 AM: npm packages installed
8:38:41 AM: Install dependencies script success
8:38:41 AM: Starting build script
8:38:42 AM: Detected 1 framework(s)
8:38:42 AM: "next" at version "13.1.6"
8:38:42 AM: Section completed: initializing
8:38:44 AM: ​
8:38:44 AM: Netlify Build                                                 
8:38:44 AM: ────────────────────────────────────────────────────────────────
8:38:44 AM: ​
8:38:44 AM: ❯ Version
8:38:44 AM:   @netlify/build 29.12.1
8:38:44 AM: ​
8:38:44 AM: ❯ Flags
8:38:44 AM:   baseRelDir: true
8:38:44 AM:   buildId: 647f36d0a3ff8500076c40f3
8:38:44 AM:   deployId: 647f36d0a3ff8500076c40f5
8:38:44 AM: ​
8:38:44 AM: ❯ Current directory
8:38:44 AM:   /opt/build/repo
8:38:44 AM: ​
8:38:44 AM: ❯ Config file
8:38:44 AM:   /opt/build/repo/netlify.toml
8:38:44 AM: ​
8:38:44 AM: ❯ Context
8:38:44 AM:   branch-deploy
8:38:44 AM: ​
8:38:44 AM: ❯ Using Next.js Runtime - v4.37.4
8:38:44 AM: ​
8:38:44 AM: ❯ Loading plugins
8:38:44 AM:    - @sentry/netlify-build-plugin@1.1.1 from Netlify app
8:38:45 AM: ​
8:38:45 AM: @netlify/plugin-nextjs (onPreBuild event)                     
8:38:45 AM: ────────────────────────────────────────────────────────────────
8:38:45 AM: ​
8:38:45 AM: Next.js cache restored.
8:38:45 AM: Not running Next Runtime
8:38:45 AM: ​
8:38:45 AM: (@netlify/plugin-nextjs onPreBuild completed in 79ms)
8:38:45 AM: ​
8:38:45 AM: build.command from netlify.toml                               
8:38:45 AM: ────────────────────────────────────────────────────────────────
8:38:45 AM: ​
8:38:45 AM: $ next build
8:38:45 AM: info  - Loaded env from /opt/build/repo/.env
8:38:46 AM: info  - Linting and checking validity of types...
8:38:48 AM: info  - Creating an optimized production build...
8:38:59 AM: info  - Compiled successfully
8:38:59 AM: info  - Collecting page data...
8:39:07 AM: info  - Generating static pages (0/66)
8:39:08 AM: info  - Generating static pages (16/66)
8:39:09 AM: info  - Generating static pages (32/66)
8:39:09 AM: info  - Generating static pages (49/66)
8:39:10 AM: info  - Generating static pages (66/66)
8:39:10 AM: info  - Finalizing page optimization...
8:39:10 AM: Route (pages)                                                              Size     First Load JS
8:39:10 AM: β”Œ β—‹ / (2416 ms)                                                            905 B           210 kB
8:39:10 AM: β”œ   /_app                                                                  0 B             106 kB
8:39:10 AM: β”œ β—‹ /404 (2504 ms)                                                         2.35 kB         147 kB
8:39:10 AM: β”œ ● /about (1391 ms)                                                       2.47 kB         147 kB
8:39:10 AM: β”œ Ξ» /api/products                                                          0 B             106 kB
8:39:10 AM: β”œ β—‹ /posts (1906 ms)                                                       370 B           209 kB
8:39:10 AM: β”œ ● /posts/[...post] (39261 ms)                                            679 B           210 kB
8:39:10 AM: β”œ   β”œ /posts/3-things-to-know-about-the-universe (2321 ms)
8:39:10 AM: β”œ   β”œ /posts/faith-over-fear (2203 ms)
8:39:10 AM: β”œ   β”œ /posts/benefits-of-praying-in-tongues (2174 ms)
8:39:10 AM: β”œ   β”œ /posts/3-things-to-keep-in-mind-as-you-grow-in-your-faith (1920 ms)
8:39:10 AM: β”œ   β”œ /posts/before-you-can-love-your-neighbor (1805 ms)
8:39:10 AM: β”œ   β”œ /posts/a-lesson-from-shadrach-meshach-and-abednego (1725 ms)
8:39:10 AM: β”œ   β”œ /posts/hope-a-poem (1687 ms)
8:39:10 AM: β”œ   β”” [+50 more paths] (avg 509 ms)
8:39:10 AM: β”œ ● /privacy-policy (1611 ms)                                              2.28 kB         147 kB
8:39:10 AM: β”œ ● /salvation (1401 ms)                                                   458 B           209 kB
8:39:10 AM: β”œ ● /shop (1602 ms)                                                        3.69 kB         148 kB
8:39:10 AM: β”œ β—‹ /shop/[...pid] (1993 ms)                                               2.22 kB         147 kB
8:39:10 AM: β”” ● /terms-and-conditions (1884 ms)                                        2.28 kB         147 kB
8:39:10 AM: + First Load JS shared by all                                              111 kB
8:39:10 AM:   β”œ chunks/framework-2c79e2a64abdb08b.js                                   45.2 kB
8:39:10 AM:   β”œ chunks/main-5020794388548d5e.js                                        26.8 kB
8:39:10 AM:   β”œ chunks/pages/_app-e0430a70f3849eb6.js                                  33.5 kB
8:39:10 AM:   β”œ chunks/webpack-5e4cfed343674306.js                                     952 B
8:39:10 AM:   β”” css/b9a7adbfc569b191.css                                               4.57 kB
8:39:10 AM: Ξ»  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
8:39:10 AM: β—‹  (Static)  automatically rendered as static HTML (uses no initial props)
8:39:10 AM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
8:39:10 AM: ​
8:39:10 AM: (build.command completed in 24.9s)
8:39:10 AM: ​
8:39:10 AM: @netlify/plugin-nextjs (onBuild event)                        
8:39:10 AM: ────────────────────────────────────────────────────────────────
8:39:10 AM: ​
8:39:10 AM: ​
8:39:10 AM: (@netlify/plugin-nextjs onBuild completed in 4ms)
8:39:10 AM: ​
8:39:10 AM: @netlify/plugin-nextjs (onPostBuild event)                    
8:39:10 AM: ────────────────────────────────────────────────────────────────
8:39:10 AM: ​
8:39:10 AM: Next.js cache saved.
8:39:10 AM: ​
8:39:10 AM: (@netlify/plugin-nextjs onPostBuild completed in 94ms)
8:39:10 AM: ​
8:39:10 AM: @sentry/netlify-build-plugin (onPostBuild event)              
8:39:10 AM: ────────────────────────────────────────────────────────────────
8:39:10 AM: ​
8:39:10 AM: Creating new release with version:  staging
8:39:11 AM:   INFO    2023-06-06 13:39:11.257270246 +00:00 Loaded config from /opt/build/repo/.sentryclirc
8:39:11 AM:   INFO    2023-06-06 13:39:11.257329970 +00:00 sentry-cli was invoked with the following command line: "/opt/build/repo/.netlify/plugins/node_modules/@sentry/cli/sentry-cli" "releases" "files" "staging" "upload-sourcemaps" ".next" "--ignore" "node_modules" "--rewrite" "--url-prefix" "~/"
8:39:11 AM: > Found 93 release files
8:39:11 AM: > Analyzing 93 sources
8:39:11 AM: > Rewriting sources
8:39:11 AM: > Adding source map references
8:39:12 AM: > Bundled 93 files for upload
8:39:12 AM: > Uploaded release files to Sentry
8:39:12 AM: > File upload complete (processing pending on server)
8:39:12 AM: > Organization: seumo-llc
8:39:12 AM: > Project: owc-blog
8:39:12 AM: > Release: staging
8:39:12 AM: > Dist: None
8:39:12 AM: Source Map Upload Report
8:39:12 AM:   Scripts
8:39:12 AM:     ~/server/chunks/18.js
8:39:12 AM:     ~/server/chunks/209.js
8:39:12 AM:     ~/server/chunks/558.js
8:39:12 AM:     ~/server/chunks/61.js
8:39:12 AM:     ~/server/chunks/676.js
8:39:12 AM:     ~/server/chunks/693.js
8:39:12 AM:     ~/server/chunks/714.js
8:39:12 AM:     ~/server/chunks/852.js
8:39:12 AM:     ~/server/font-loader-manifest.js
8:39:12 AM:     ~/server/middleware-react-loadable-manifest.js
8:39:12 AM:     ~/server/pages/_app.js
8:39:12 AM:     ~/server/pages/_document.js
8:39:12 AM:     ~/server/pages/_error.js
8:39:12 AM:     ~/server/pages/about.js
8:39:12 AM:     ~/server/pages/api/products.js
8:39:12 AM:     ~/server/pages/posts/[...post].js
8:39:12 AM:     ~/server/pages/privacy-policy.js
8:39:12 AM:     ~/server/pages/salvation.js
8:39:12 AM:     ~/server/pages/shop.js
8:39:12 AM:     ~/server/pages/terms-and-conditions.js
8:39:12 AM:     ~/server/webpack-api-runtime.js
8:39:12 AM:     ~/server/webpack-runtime.js
8:39:12 AM:     ~/static/qQTuhAp_mWc6E42SzwrVv/_ssgManifest.js
8:39:12 AM:   Minified Scripts
8:39:12 AM:     ~/server/chunks/602.js (sourcemap at 602.js.map)
8:39:12 AM:     ~/server/chunks/943.js (sourcemap at 943.js.map)
8:39:12 AM:     ~/server/middleware-build-manifest.js (no sourcemap ref)
8:39:12 AM:       - warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/server/middleware-build-manifest.js.)
8:39:12 AM:     ~/static/chunks/761-3c8072ecf72b88b4.js (sourcemap at 761-3c8072ecf72b88b4.js.map)
8:39:12 AM:     ~/static/chunks/95-accf0d6ea73bbe2e.js (sourcemap at 95-accf0d6ea73bbe2e.js.map)
8:39:12 AM:     ~/static/chunks/a9e2c71f-3c72a602d9e41f7a.js (sourcemap at a9e2c71f-3c72a602d9e41f7a.js.map)
8:39:12 AM:     ~/static/chunks/b47c2c54-b4fc1646424cc0a0.js (sourcemap at b47c2c54-b4fc1646424cc0a0.js.map)
8:39:12 AM:     ~/static/chunks/framework-2c79e2a64abdb08b.js (sourcemap at framework-2c79e2a64abdb08b.js.map)
8:39:12 AM:     ~/static/chunks/main-5020794388548d5e.js (sourcemap at main-5020794388548d5e.js.map)
8:39:12 AM:     ~/static/chunks/pages/404-aa4408a67a0d6b37.js (sourcemap at 404-aa4408a67a0d6b37.js.map)
8:39:12 AM:     ~/static/chunks/pages/_app-e0430a70f3849eb6.js (sourcemap at _app-e0430a70f3849eb6.js.map)
8:39:12 AM:     ~/static/chunks/pages/_error-ff38ba5c6298a47b.js (sourcemap at _error-ff38ba5c6298a47b.js.map)
8:39:12 AM:     ~/static/chunks/pages/about-ea5994263d58f0f4.js (sourcemap at about-ea5994263d58f0f4.js.map)
8:39:12 AM:     ~/static/chunks/pages/index-2fac51cb4cfc3e5b.js (sourcemap at index-2fac51cb4cfc3e5b.js.map)
8:39:12 AM:     ~/static/chunks/pages/posts-20302819645cec8f.js (sourcemap at posts-20302819645cec8f.js.map)
8:39:12 AM:     ~/static/chunks/pages/posts/[...post]-27cf914c9bcb99e3.js (sourcemap at [...post]-27cf914c9bcb99e3.js.map)
8:39:12 AM:     ~/static/chunks/pages/privacy-policy-4b422e8defa367e8.js (sourcemap at privacy-policy-4b422e8defa367e8.js.map)
8:39:12 AM:     ~/static/chunks/pages/salvation-76b6b278a30669d4.js (sourcemap at salvation-76b6b278a30669d4.js.map)
8:39:12 AM:     ~/static/chunks/pages/shop-23a9e25e6c51674b.js (sourcemap at shop-23a9e25e6c51674b.js.map)
8:39:12 AM:     ~/static/chunks/pages/shop/[...pid]-ffd1fbdeec7acf9a.js (sourcemap at [...pid]-ffd1fbdeec7acf9a.js.map)
8:39:12 AM:     ~/static/chunks/pages/terms-and-conditions-4892afa5f6743573.js (sourcemap at terms-and-conditions-4892afa5f6743573.js.map)
8:39:12 AM:     ~/static/chunks/polyfills-c67a75d1b6f99dc8.js (no sourcemap ref)
8:39:15 AM: Starting post processing
8:39:12 AM:       - warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/static/chunks/polyfills-c67a75d1b6f99dc8.js.)
8:39:12 AM:     ~/static/chunks/webpack-5e4cfed343674306.js (sourcemap at webpack-5e4cfed343674306.js.map)
8:39:12 AM:     ~/static/qQTuhAp_mWc6E42SzwrVv/_buildManifest.js (no sourcemap ref)
8:39:12 AM:       - warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/static/qQTuhAp_mWc6E42SzwrVv/_buildManifest.js.)
8:39:12 AM:   Source Maps
8:39:15 AM: Post processing - HTML
8:39:12 AM:     ~/server/chunks/18.js.map
8:39:12 AM:     ~/server/chunks/209.js.map
8:39:15 AM: Skipping form detection
8:39:12 AM:     ~/server/chunks/558.js.map
8:39:12 AM:     ~/server/chunks/602.js.map
8:39:12 AM:     ~/server/chunks/61.js.map
8:39:12 AM:     ~/server/chunks/676.js.map
8:39:12 AM:     ~/server/chunks/693.js.map
8:39:12 AM:     ~/server/chunks/714.js.map
8:39:12 AM:     ~/server/chunks/852.js.map
8:39:12 AM:     ~/server/chunks/943.js.map
8:39:12 AM:     ~/server/pages/404.js.map
8:39:12 AM:     ~/server/pages/_app.js.map
8:39:12 AM:     ~/server/pages/_document.js.map
8:39:12 AM:     ~/server/pages/_error.js.map
8:39:12 AM:     ~/server/pages/about.js.map
8:39:12 AM:     ~/server/pages/api/products.js.map
8:39:12 AM:     ~/server/pages/index.js.map
8:39:12 AM:     ~/server/pages/posts.js.map
8:39:12 AM:     ~/server/pages/posts/[...post].js.map
8:39:12 AM:     ~/server/pages/privacy-policy.js.map
8:39:12 AM:     ~/server/pages/salvation.js.map
8:39:12 AM:     ~/server/pages/shop.js.map
8:39:12 AM:     ~/server/pages/shop/[...pid].js.map
8:39:12 AM:     ~/server/pages/terms-and-conditions.js.map
8:39:12 AM:     ~/server/webpack-api-runtime.js.map
8:39:12 AM:     ~/server/webpack-runtime.js.map
8:39:12 AM:     ~/static/chunks/761-3c8072ecf72b88b4.js.map
8:39:12 AM:     ~/static/chunks/95-accf0d6ea73bbe2e.js.map
8:39:12 AM:     ~/static/chunks/a9e2c71f-3c72a602d9e41f7a.js.map
8:39:12 AM:     ~/static/chunks/b47c2c54-b4fc1646424cc0a0.js.map
8:39:12 AM:     ~/static/chunks/framework-2c79e2a64abdb08b.js.map
8:39:12 AM:     ~/static/chunks/main-5020794388548d5e.js.map
8:39:12 AM:     ~/static/chunks/pages/404-aa4408a67a0d6b37.js.map
8:39:12 AM:     ~/static/chunks/pages/_app-e0430a70f3849eb6.js.map
8:39:12 AM:     ~/static/chunks/pages/_error-ff38ba5c6298a47b.js.map
8:39:12 AM:     ~/static/chunks/pages/about-ea5994263d58f0f4.js.map
8:39:12 AM:     ~/static/chunks/pages/index-2fac51cb4cfc3e5b.js.map
8:39:12 AM:     ~/static/chunks/pages/posts-20302819645cec8f.js.map
8:39:12 AM:     ~/static/chunks/pages/posts/[...post]-27cf914c9bcb99e3.js.map
8:39:12 AM:     ~/static/chunks/pages/privacy-policy-4b422e8defa367e8.js.map
8:39:12 AM:     ~/static/chunks/pages/salvation-76b6b278a30669d4.js.map
8:39:12 AM:     ~/static/chunks/pages/shop-23a9e25e6c51674b.js.map
8:39:12 AM:     ~/static/chunks/pages/shop/[...pid]-ffd1fbdeec7acf9a.js.map
8:39:12 AM:     ~/static/chunks/pages/terms-and-conditions-4892afa5f6743573.js.map
8:39:12 AM:     ~/static/chunks/webpack-5e4cfed343674306.js.map
8:39:12 AM:     ~/static/css/b9a7adbfc569b191.css.map
8:39:14 AM: Successfully notified Sentry of deployment!
8:39:14 AM: ​
8:39:14 AM: (@sentry/netlify-build-plugin onPostBuild completed in 3.6s)
8:39:14 AM: ​
8:39:14 AM: Deploy site                                                   
8:39:14 AM: ────────────────────────────────────────────────────────────────
8:39:14 AM: ​
8:39:14 AM: Starting to deploy site from '.next'
8:39:14 AM: Calculating files to upload
8:39:14 AM: 96 new files to upload
8:39:14 AM: 0 new functions to upload
8:39:15 AM: Section completed: deploying
8:39:15 AM: Site deploy was successfully initiated
8:39:15 AM: ​
8:39:15 AM: (Deploy site completed in 860ms)
8:39:15 AM: ​
8:39:15 AM: Netlify Build Complete                                        
8:39:15 AM: ────────────────────────────────────────────────────────────────
8:39:15 AM: ​
8:39:15 AM: (Netlify Build completed in 31.1s)
8:39:15 AM: Caching artifacts
8:39:15 AM: Started saving node modules
8:39:15 AM: Finished saving node modules
8:39:15 AM: Started saving build plugins
8:39:15 AM: Finished saving build plugins
8:39:15 AM: Started saving corepack cache
8:39:15 AM: Finished saving corepack cache
8:39:18 AM: Post processing - header rules
8:39:15 AM: Started saving pip cache
8:39:15 AM: Finished saving pip cache
8:39:15 AM: Started saving emacs cask dependencies
8:39:19 AM: Post processing - redirect rules
8:39:15 AM: Finished saving emacs cask dependencies
8:39:15 AM: Started saving maven dependencies
8:39:19 AM: Post processing done
8:39:15 AM: Finished saving maven dependencies
8:39:15 AM: Started saving boot dependencies
8:39:15 AM: Finished saving boot dependencies
8:39:19 AM: Section completed: postprocessing
8:39:15 AM: Started saving rust rustup cache
8:39:15 AM: Finished saving rust rustup cache
8:39:15 AM: Started saving go dependencies
8:39:15 AM: Finished saving go dependencies
8:39:15 AM: Build script success
8:39:15 AM: Section completed: building
8:39:17 AM: Uploading Cache of size 252.6MB
8:39:19 AM: Section completed: cleanup
8:39:19 AM: Finished processing build request in 53.729s
8:39:20 AM: Site is live ✨

Here is my next.config.js file:

const { withSentryConfig } = require('@sentry/nextjs');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    unoptimized: true
  },
  webpack: (cfg) => {
    cfg.module.rules.push(
      {
        test: /\.md$/,
        loader: 'frontmatter-markdown-loader'
      }
    )
    return cfg;
  }
}
module.exports = withSentryConfig(
  nextConfig,
  { silent: true },
  { hideSourceMaps: true },
);

my package.json:

{
  "name": "overcomewithchrist",
  "version": "0.4.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "lint": "next lint"
  },
  "dependencies": {
    "@mailchimp/mailchimp_marketing": "^3.0.80",
    "@next/font": "13.1.6",
    "@sentry/nextjs": "^7.38.0",
    "@tailwindcss/forms": "^0.5.3",
    "autoprefixer": "^10.4.13",
    "eslint": "8.34.0",
    "eslint-config-next": "13.1.6",
    "feed": "^4.2.2",
    "frontmatter-markdown-loader": "^3.7.0",
    "next": "13.1.6",
    "postcss": "^8.4.21",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.43.2",
    "tailwindcss": "^3.2.7"
  }
}

When I update .toml file to have

[build]
  command = "npm run build && npm run export"
  publish = "out"

it will deploy, and be accessible as expected, however, I am unable to use my /api routes.

How come the basic netlify deploy settings don’t work for me as expected?

I’ve tried so many itterations of clearing cache, not using the toml, updating my toml. Removed redirects, changed the commands, added functions path, etc. etc. trying the standalone output for next.js, so on and so forth. I need someone else’s point of view.

My main issue:
I need to be able to have my shop page crawled in order for the checkout experience to function properly. But the shop page doesn’t load all the needed products when crawled

Results from postman:

Screenshot 2023-06-06 at 09.07.22
Screenshot 2023-06-06 at 09.07.221910Γ—1480 208 KB

page code:

// /shop/index.js

import Layout from '@/components/layout'
import ProductList from '@/components/product-list'
import {getProducts} from '@/context/product-list-context'
import Head from 'next/head'
import Script from 'next/script'
import Image from 'next/image'
const ShopHome = (products) => {

  return (<>
      <Head>
        <link rel="preconnect" href="https://app.snipcart.com" />
        <link rel="preconnect" href="https://cdn.snipcart.com" />
        <link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.3.0/default/snipcart.css" />
      </Head>

      <Layout pageTitle={'Shop'}>
        <div className={"flex flex-row justify-between content-center "}>
          <h1 className={'pageTitle'}>All Products</h1>
          <a href="#" className="snipcart-checkout block py-10 px-5 md:px-10"><Image alt={"cart"} width={25} height={25} src={"/img/shop/cart.png"} /></a>
        </div>
        <ProductList limit={10} products={products}/>
        <Script src="https://cdn.snipcart.com/themes/v3.2.0/default/snipcart.js"></Script>
        <div hidden id="snipcart" data-api-key={`${process.env.NEXT_PUBLIC_SC_KEY}`}></div>
      </Layout>
  </>
  )
}

export async function getStaticProps() {
  const products = await getProducts()
  return {
    props: { products, fallback: false }
  }
}

export default ShopHome

I was using a ProductList Context instead of getStaticProps() at one point. But I switched to getStaticProps thinking maybe it’s because of the context that the pages weren’t being generated as expected. But that didn’t seem to be case.

The alternative is to create an API that returns the products via a json. But with next export I am not able to access my /api endpoints.

Thanks for your time.

2

Hi sorry for the delay in response. I was able to load up your site no problem. Are you still having this issue?

Screenshot 2023-06-09 at 8.59.07 PM
Screenshot 2023-06-09 at 8.59.07 PM1920Γ—1448 90.2 KB

If not, i’d love for you to share the solution you found to resolve your error.

3

Hey Sam,

thanks for the reply. Yes, I am still having issues.
I currently have a workaround deployed, and my production build is functional. However, because I have to use the export command, I can’t proceed with setting up checkout, etc.

The alternative is to create an API that returns the products via a json. But with next export I am not able to access my /api endpoints

I will create a preview deploy with the changes in the TOML so you can take a look at it.

link: https://shop-updates--overcomewchrist.netlify.app

Also, here is the files that I’m seeing in https://netlify-file-browser.netlify.app/

image
image1920Γ—4103 228 KB

The HTML files are present in the pages folder

4

Please remove this. It’s documented to not work with Next.js.

next export doesn’t support API routes (that’s how Next.js works).

The reason it’s not wokring is, you’ve added the environment variable: NETLIFY_NEXT_PLUGIN_SKIP with the value true. Either remove it, or set it to false for this branch.

5

So after posting this, I’ve tried some different things like trying to use a netlify function instead, or exporting the json to a file, but didn’t get any positive results.

Currently, the only thing in my TOML is

[build]
  command = "next build"
  publish = ".next"

The reason it’s not wokring is, you’ve added the environment variable: NETLIFY_NEXT_PLUGIN_SKIP with the value true . Either remove it, or set it to false for this branch.

And I’m still just getting a 404 on deploy. I’ve already removed the plug-in flag before posting to this forum. And I’ve redeployed several times without the plug and cleared cache.

And the problem is that I get a 404 if I don’t use the export flag…

6

Let’s start from 0. This is all the settings you need:

  1. In your netlify.toml:
[build]
  command = "next build"
  publish = ".next"

Make sure Next.js Runtime is installed. If not, you can install it manually using:

npm i @netlify/plugin-nextjs

and add the following to your netlify.toml:

[[plugins]]
  package = "@netlify/plugin-nextjs"

Finally, make sure you remove the NETLIFY_NEXT_PLUGIN_SKIP environment variable or set it to false.

It’s working for all Next.js sites on Netlify, yours won’t be any different. I think the amount of retries and confusion has skewed things for you.

1 Like
7

Finally, make sure you remove the NETLIFY_NEXT_PLUGIN_SKIP environment variable or set it to false

I forgot to check my env variable setting for the plugin skip value. I think this was the ultimate problem. Thank you so much!

I’m no longer getting a 404, but my CSS is not being used/loaded. I’m using tailwind, postcss, and a global.css file. Any idea what I can try to get these loading properly?

Getting this in the console

SCR-20230611-sv8
SCR-20230611-sv81912Γ—352 60.4 KB

And it seems the CSS and JS bundle files are empty

image
image1970Γ—962 109 KB

image
image2024Γ—1170 207 KB

8

Interesting. The URL your first screenshot mentions (d33wubrfki0l68.cloudfront.net) should only be used if you have our Asset Optimization feature enabled (here: Netlify App)

However, the docs for the next integration specifically mention that this is not supported:

So, I think we’ve found the source of this problem too :slight_smile: Please deactivate this feature and try a redeploy.

1 Like
9

Oh my goodness, thank you so much! This fixed it and now I can move forward with my website.

Thank you guys so much for all your help and patience!