Running NextJS build file vs code (both locally) produce different outputs

Question

The issue i'm facing is related to the .next/ build directory.

after running npm run dev I get a working version locally; I never paid enough attention to test the build file before deploying.

I first noticed this problem when i tried deploying the code via Netlify. The built folder "./next" does not have a generated index.html file in the root directory, what i noticed is that it is in fact, located under .next/server/app. the result of the initial deploy was just 404 - Not Found

After adjusting the Netlify publish directory config to serve .next/server/app as it has the index.html file; but the result was bizare: I do indeed have a page being served but it lacks the skeleton and CSS with all the other libraries & components & utils missing. The only visible aspect of the page are the "navbar" located under ./app/page.tsx

I used the npm package library called serve in order to test my built files locally before pushing. Unfortunately the skeleton-lacking page mentioned before persists.

Is the build failing somewhere to minify the code? if so it the logs dont seem to help at all as the output has no fatal errors or warnings i do have a lambda 404 i think? im not sure

> [email protected] build
> next build

- info Loaded env from /Users/user/Projects/nextJs/intro-next-v3-app/.env
- info Creating an optimized production build  
- info Compiled successfully
- info Linting and checking validity of types  
- info Collecting page data  
- info Generating static pages (6/6)
- info Finalizing page optimization  

Route (app)                                Size     First Load JS
┌ ○ /                                      5.67 kB         118 kB
├ ○ /animation                             512 B           113 kB
├ λ /docs/[[...slug]]                      822 B          79.4 kB
├ ○ /favicon.ico                           0 B                0 B
└ ○ /todos                                 983 B          99.9 kB
+ First Load JS shared by all              78.6 kB
 ├ chunks/596-5af57ee400189c89.js         26.1 kB
 ├ chunks/fd9d1056-baaf2cbe3cb08c6e.js    50.5 kB
 ├ chunks/main-app-54194d6e41022f5d.js    219 B
 └ chunks/webpack-07b4f0f7edede29a.js     1.77 kB

Route (pages)                              Size     First Load JS
─ ○ /404                                   182 B          76.6 kB
+ First Load JS shared by all              76.4 kB
 ├ chunks/framework-8883d1e9be70c3da.js   45.1 kB
 ├ chunks/main-b24cb0c7901f1699.js        29.4 kB
 ├ chunks/pages/_app-52924524f99094ab.js  195 B
 └ chunks/webpack-07b4f0f7edede29a.js     1.77 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

my package.json file:

{
  "name": "next-portfolio-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.5.6",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "firebase": "^10.3.1",
    "framer-motion": "^10.16.4",
    "next": "13.4.19",
    "next-images": "^1.8.5",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@svgr/webpack": "^8.1.0",
    "@testing-library/jest-dom": "^6.1.2",
    "@testing-library/react": "^14.0.0"
  }
}

next.config.js file:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
// -- commented out for testing purposes. same outcome with or without the following configurations --
  // output: 'export',
  // experimental: {
  //   serverActions: true,
  // },
}

module.exports = nextConfig

tailwind.config.ts

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}
export default config

Local output serve -s .next/server/app:

Local output npm run dev:

browser: Brave

Answer 1

Next.js has the build-in npm run build function that you can use instead of serve. If you want to then run the then builded files locally, you can use npm run start!