Hello there, quickly approaching my wits end with an issue I seem to be facing deploying a simple NextJS site. After much difficulty with the UI not behaving as expected. In the end, I opted to use Netlify CLI, which seemed to accept the attempted deploy with no errors.
However, when trying to then visit the site after deploy, I only get the HTML page content, with no styles being rendered. Inspecting the code, I can see that the classnames are all present and that there is CSS referenced in the head, but for whatever reason there are no styles on the page.
Again, I should mention that during the build there are no errors. Just a warning about a build cache not found. To make matters worse, when I attempt to download the deployed files, I get the message “Error during download”, so I can’t even check for issues in the deployed files.
Everything was going so well with this build until i got to Netlify… I hope someone can help me to figure this out.
https://akins-portfolio-blog.netlify.app/
12:18:27 PM: Build ready to start
12:18:29 PM: build-image version: d2c6dbeac570350a387d832f64bc980dc964ad65 (focal)
12:18:29 PM: build-image tag: v4.8.0
12:18:29 PM: buildbot version: 4aaa27647e859c2d38cfbb25901ceae1e7f3eeae
12:18:29 PM: Fetching cached dependencies
12:18:29 PM: Failed to fetch cache, continuing with build
12:18:29 PM: Starting to prepare the repo for build
12:18:30 PM: No cached dependencies found. Cloning fresh repo
12:18:30 PM: git clone git@github.com:akin-fagbohun/nextjs-portfolio-blog
12:18:30 PM: Preparing Git Reference refs/heads/main
12:18:31 PM: Parsing package.json dependencies
12:18:31 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'nextjs-blog/.next' versus '.next' in the Netlify UI
12:18:31 PM: Different functions path detected, going to use the one specified in the Netlify configuration file: 'nextjs-blog/netlify/functions' versus 'netlify/functions' in the Netlify UI
12:18:32 PM: Starting build script
12:18:32 PM: Installing dependencies
12:18:32 PM: Python version set to 2.7
12:18:32 PM: Downloading and installing node v16.15.0...
12:18:33 PM: Downloading https://nodejs.org/dist/v16.15.0/node-v16.15.0-linux-x64.tar.xz...
12:18:33 PM: Computing checksum with sha256sum
12:18:33 PM: Checksums matched!
12:18:36 PM: Now using node v16.15.0 (npm v8.5.5)
12:18:36 PM: Started restoring cached build plugins
12:18:36 PM: Finished restoring cached build plugins
12:18:36 PM: Attempting ruby version 2.7.2, read from environment
12:18:37 PM: Using ruby version 2.7.2
12:18:37 PM: Using PHP version 8.0
12:18:37 PM: No npm workspaces detected
12:18:37 PM: Started restoring cached node modules
12:18:37 PM: Finished restoring cached node modules
12:18:38 PM: Installing NPM modules using NPM version 8.5.5
12:18:59 PM: added 665 packages, and audited 666 packages in 21s
12:18:59 PM: 180 packages are looking for funding
12:18:59 PM: run `npm fund` for details
12:18:59 PM: found 0 vulnerabilities
12:18:59 PM: NPM modules installed
12:19:00 PM: Started restoring cached go cache
12:19:00 PM: Finished restoring cached go cache
12:19:00 PM: go version go1.16.5 linux/amd64
12:19:00 PM: go version go1.16.5 linux/amd64
12:19:00 PM: Installing missing commands
12:19:00 PM: Verify run directory
12:19:01 PM:
12:19:01 PM: ────────────────────────────────────────────────────────────────
12:19:01 PM: Netlify Build
12:19:01 PM: ────────────────────────────────────────────────────────────────
12:19:01 PM:
12:19:01 PM: ❯ Version
12:19:01 PM: @netlify/build 27.1.3
12:19:01 PM:
12:19:01 PM: ❯ Flags
12:19:01 PM: baseRelDir: true
12:19:01 PM: buildId: 62974b03f4443305cdc704a8
12:19:01 PM: deployId: 62974b03f4443305cdc704aa
12:19:01 PM:
12:19:01 PM: ❯ Current directory
12:19:01 PM: /opt/build/repo/nextjs-blog
12:19:01 PM:
12:19:01 PM: ❯ Config file
12:19:01 PM: /opt/build/repo/nextjs-blog/netlify.toml
12:19:01 PM:
12:19:01 PM: ❯ Context
12:19:01 PM: production
12:19:01 PM:
12:19:01 PM: ❯ Loading plugins
12:19:01 PM: - @netlify/plugin-nextjs@4.7.1 from netlify.toml and package.json
12:19:02 PM:
12:19:02 PM: ────────────────────────────────────────────────────────────────
12:19:02 PM: 1. @netlify/plugin-nextjs (onPreBuild event)
12:19:02 PM: ────────────────────────────────────────────────────────────────
12:19:02 PM:
12:19:02 PM: No Next.js cache to restore.
12:19:02 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
12:19:02 PM:
12:19:02 PM: (@netlify/plugin-nextjs onPreBuild completed in 28ms)
12:19:02 PM:
12:19:02 PM: ────────────────────────────────────────────────────────────────
12:19:02 PM: 2. build.command from netlify.toml
12:19:02 PM: ────────────────────────────────────────────────────────────────
12:19:02 PM:
12:19:02 PM: $ npm run build
12:19:03 PM: > build
12:19:03 PM: > next build
12:19:03 PM: warn - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
12:19:03 PM: info - Checking validity of types...
12:19:06 PM: info - Creating an optimized production build...
12:19:17 PM: info - Compiled successfully
12:19:17 PM: info - Collecting page data...
12:19:20 PM: info - Generating static pages (0/4)
12:19:20 PM: info - Generating static pages (1/4)
12:19:21 PM: info - Generating static pages (2/4)
12:19:21 PM: info - Generating static pages (3/4)
12:19:21 PM: info - Generating static pages (4/4)
12:19:21 PM: info - Finalizing page optimization...
12:19:21 PM: Page Size First Load JS
12:19:21 PM: ┌ ● / (625 ms) 3.2 kB 88.2 kB
12:19:21 PM: ├ /_app 0 B 72 kB
12:19:21 PM: ├ ○ /404 193 B 72.2 kB
12:19:21 PM: └ ● /post/[id] (645 ms) 2.94 kB 87.9 kB
12:19:21 PM: └ /post/why-i-love-nextjs (645 ms)
12:19:21 PM: + First Load JS shared by all 72 kB
12:19:21 PM: ├ chunks/framework-5f4595e5518b5600.js 42 kB
12:19:21 PM: ├ chunks/main-2247888345aac039.js 28.6 kB
12:19:21 PM: ├ chunks/pages/_app-05a4472bc3e8727e.js 507 B
12:19:21 PM: ├ chunks/webpack-69bfa6990bb9e155.js 769 B
12:19:21 PM: └ css/a7ba0ef7aefee4ba.css 784 B
12:19:21 PM: ○ (Static) automatically rendered as static HTML (uses no initial props)
12:19:21 PM: ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
12:19:21 PM:
12:19:21 PM: (build.command completed in 18.9s)
12:19:21 PM:
12:19:21 PM: ────────────────────────────────────────────────────────────────
12:19:21 PM: 3. @netlify/plugin-nextjs (onBuild event)
12:19:21 PM: ────────────────────────────────────────────────────────────────
12:19:21 PM:
12:19:21 PM: Patching /opt/build/repo/nextjs-blog/node_modules/next/dist/server/base-server.js
12:19:21 PM: Done
12:19:21 PM: Patching /opt/build/repo/nextjs-blog/node_modules/next/dist/server/next-server.js
12:19:21 PM: Done
12:19:21 PM: Moving static page files to serve from CDN...
12:19:21 PM: Moved 4 files
12:19:21 PM: Netlify configuration property "redirects" value changed to [
12:19:21 PM: {
12:19:21 PM: from: '/*',
12:19:21 PM: query: {},
12:19:21 PM: to: '/blog/:splat',
12:19:21 PM: force: false,
12:19:21 PM: conditions: {},
12:19:21 PM: headers: {}
12:19:21 PM: },
12:19:21 PM: { from: '/_next/static/*', to: '/static/:splat', status: 200 },
12:19:21 PM: {
12:19:21 PM: from: '/_next/image*',
12:19:21 PM: query: { url: ':url', w: ':width', q: ':quality' },
12:19:21 PM: to: '/_ipx/w_:width,q_:quality/:url',
12:19:21 PM: status: 301
12:19:21 PM: },
12:19:21 PM: { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
12:19:21 PM: { from: '/cache/*', to: '/404.html', status: 404, force: true },
12:19:21 PM: { from: '/server/*', to: '/404.html', status: 404, force: true },
12:19:21 PM: { from: '/serverless/*', to: '/404.html', status: 404, force: true },
12:19:21 PM: { from: '/trace', to: '/404.html', status: 404, force: true },
12:19:21 PM: { from: '/traces', to: '/404.html', status: 404, force: true },
12:19:21 PM: {
12:19:21 PM: from: '/routes-manifest.json',
12:19:21 PM: to: '/404.html',
12:19:21 PM: status: 404,
12:19:21 PM: force: true
12:19:21 PM: },
12:19:21 PM: {
12:19:21 PM: from: '/build-manifest.json',
12:19:21 PM: to: '/404.html',
12:19:21 PM: status: 404,
12:19:21 PM: force: true
12:19:21 PM: },
12:19:21 PM: {
12:19:21 PM: from: '/prerender-manifest.json',
12:19:21 PM: to: '/404.html',
12:19:21 PM: status: 404,
12:19:21 PM: force: true
12:19:21 PM: },
12:19:21 PM: {
12:19:21 PM: from: '/react-loadable-manifest.json',
12:19:21 PM: to: '/404.html',
12:19:21 PM: status: 404,
12:19:21 PM: force: true
12:19:21 PM: },
12:19:21 PM: { from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
12:19:21 PM: {
12:19:21 PM: from: '/api',
12:19:21 PM: to: '/.netlify/functions/___netlify-handler',
12:19:21 PM: status: 200
12:19:21 PM: },
12:19:21 PM: {
12:19:21 PM: from: '/api/*',
12:19:21 PM: to: '/.netlify/functions/___netlify-handler',
12:19:21 PM: status: 200
12:19:21 PM: },
12:19:21 PM: {
12:19:21 PM: from: '/favicon.ico',
12:19:21 PM: to: '/favicon.ico',
12:19:21 PM: conditions: { Cookie: [Array] },
12:19:21 PM: status: 200
12:19:21 PM: },
12:19:21 PM: {
12:19:21 PM: from: '/images/profile.jpg',
12:19:21 PM: to: '/images/profile.jpg',
12:19:21 PM: conditions: { Cookie: [Array] },
12:19:21 PM: status: 200
12:19:21 PM: },
12:19:21 PM: {
12:19:21 PM: from: '/*',
12:19:21 PM: to: '/.netlify/functions/___netlify-handler',
12:19:21 PM: status: 200,
12:19:21 PM: conditions: { Cookie: [Array] },
12:19:21 PM: force: true
12:19:21 PM: },
12:19:21 PM: {
12:19:21 PM: from: '/_next/data/-8e-nr4iWLiQhg-G0a-zM/post/:id.json',
12:19:21 PM: to: '/.netlify/builders/___netlify-odb-handler',
12:19:21 PM: status: 200,
12:19:21 PM: force: false
12:19:21 PM: },
12:19:21 PM: {
12:19:21 PM: from: '/post/:id',
12:19:21 PM: to: '/.netlify/builders/___netlify-odb-handler',
12:19:21 PM: status: 200,
12:19:21 PM: force: false
12:19:21 PM: },
12:19:21 PM: {
12:19:21 PM: from: '/*',
12:19:21 PM: to: '/.netlify/functions/___netlify-handler',
12:19:21 PM: status: 200
12:19:21 PM: }
12:19:21 PM: ].
12:19:21 PM:
12:19:21 PM: (@netlify/plugin-nextjs onBuild completed in 64ms)
12:19:21 PM:
12:19:21 PM: ────────────────────────────────────────────────────────────────
12:19:21 PM: 4. Functions bundling
12:19:21 PM: ────────────────────────────────────────────────────────────────
12:19:21 PM:
12:19:21 PM: The Netlify Functions setting targets a non-existing directory: netlify/functions
12:19:21 PM:
12:19:21 PM: Packaging Functions from .netlify/functions-internal directory:
12:19:21 PM: - ___netlify-handler/___netlify-handler.js
12:19:21 PM: - ___netlify-odb-handler/___netlify-odb-handler.js
12:19:21 PM: - _ipx/_ipx.js
12:19:21 PM:
12:19:34 PM:
12:19:34 PM: (Functions bundling completed in 12.8s)
12:19:34 PM:
12:19:34 PM: ────────────────────────────────────────────────────────────────
12:19:34 PM: 5. @netlify/plugin-nextjs (onPostBuild event)
12:19:34 PM: ────────────────────────────────────────────────────────────────
12:19:34 PM:
12:19:34 PM: Next.js cache saved.
12:19:34 PM:
12:19:34 PM: (@netlify/plugin-nextjs onPostBuild completed in 86ms)
12:19:35 PM: Creating deploy upload records
12:19:34 PM:
12:19:34 PM: ────────────────────────────────────────────────────────────────
12:19:34 PM: 6. Deploy site
12:19:34 PM: ────────────────────────────────────────────────────────────────
12:19:34 PM:
12:19:34 PM: Starting to deploy site from 'nextjs-blog/.next'
12:19:34 PM: Creating deploy tree
12:19:35 PM: 18 new files to upload
12:19:35 PM: 3 new functions to upload
12:19:43 PM: Site deploy was successfully initiated
12:19:43 PM:
12:19:43 PM: (Deploy site completed in 8.2s)
12:19:43 PM:
12:19:43 PM: ────────────────────────────────────────────────────────────────
12:19:43 PM: Netlify Build Complete
12:19:43 PM: ────────────────────────────────────────────────────────────────
12:19:43 PM:
12:19:43 PM: (Netlify Build completed in 41.7s)
12:19:43 PM: Starting post processing
12:19:43 PM: Caching artifacts
12:19:43 PM: Started saving node modules
12:19:43 PM: Finished saving node modules
12:19:43 PM: Started saving build plugins
12:19:43 PM: Finished saving build plugins
12:19:43 PM: Started saving pip cache
12:19:43 PM: Finished saving pip cache
12:19:43 PM: Started saving emacs cask dependencies
12:19:43 PM: Post processing - HTML
12:19:43 PM: Finished saving emacs cask dependencies
12:19:43 PM: Started saving maven dependencies
12:19:43 PM: Finished saving maven dependencies
12:19:43 PM: Started saving boot dependencies
12:19:43 PM: Finished saving boot dependencies
12:19:43 PM: Started saving rust rustup cache
12:19:43 PM: Finished saving rust rustup cache
12:19:43 PM: Started saving go dependencies
12:19:43 PM: Finished saving go dependencies
12:19:44 PM: Post processing - header rules
12:19:44 PM: Post processing - redirect rules
12:19:45 PM: Build script success
12:19:44 PM: Post processing done
12:19:48 PM: Site is live ✨
12:20:10 PM: Finished processing build request in 1m41.175742136s
