Nextjs > Netlify deploy not rendering CSS

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.

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

Hey there, @akin-f :wave:

Sorry to hear you are having difficulties here! Can you please share your project repo? This will help us look into the specifics of your site more closely. If you cannot share the repo, please share a reproduction with us. Thanks!

I took the [[redirect]] instructions out of the netlify.toml file and the css started working. Marking as resolved and moving on to my next issue.

Thanks for coming back and sharing your solution!