I am encountering an issue with the .next/ build directory.
After running npm run dev, I have a working version locally, but I didn't realize to test the build file before deployment.
The problem came to my attention when trying to deploy the code on Netlify. The generated index.html file in the root directory of the built folder "./next" was missing; instead, it was found under .next/server/app. This resulted in a 404 - Not Found error upon the initial deployment.
Adjusting the Netlify publish directory config to serve .next/server/app where the index.html is located brought some progress. However, the page served was incomplete and lacked CSS, libraries, components, and utilities, except for the "navbar" from ./app/page.tsx.
To test my built files locally before pushing them, I used the npm package library called serve. Unfortunately, the same skeleton-lacking issue persisted.
Could the build be failing to minify the code? The logs do not provide clear information as there are no fatal errors or warnings, only possibly a lambda 404 which is uncertain.
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="29474c515d0459465b5d4d454246545e55581509500c03040c">name</a> 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"
},
...
}
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 = {
...
}
export default config
Local output serve -s .next/server/app:
https://i.sstatic.net/HuSW0.png
Local output npm run dev:
https://i.sstatic.net/qmrLv.png
Browser: Brave