NextJS构建产物异常：本地部署页面缺失样式与资源

问题详情 #

• 本地执行npm run dev时项目运行完全正常，但部署前未测试构建产物
• 首次通过Netlify部署时，发现根目录没有index.html，实际文件位于.next/server/app，导致部署后出现404错误
• 将Netlify发布目录调整为.next/server/app后，页面可以访问，但仅显示./app/page.tsx中的导航栏，页面骨架、CSS样式以及其他组件、库和工具全部缺失
• 本地使用serve包测试构建产物时，同样出现上述异常
• 构建日志中没有致命错误或警告，怀疑是代码压缩环节出问题，但无法确认

构建日志 #

> next-portfolio-app@0.1.0 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)

package.json 配置 #

{
  "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 配置 #

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
// -- 测试时已注释，有无该配置结果一致 --
  // 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

页面截图 #

• 本地serve -s .next/server/app运行效果：
  
• 本地npm run dev运行效果：
  

使用浏览器：Brave

内容的提问来源于stack exchange，提问作者Sarkis