当 NextJS 12 发布时,我教用顺风构建一个项目。
我的 package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.0.1",
"react": "^18.0.0-alpha-9c8161ba8-20211028",
"react-dom": "^18.0.0-alpha-9c8161ba8-20211028"
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"eslint": "7",
"eslint-config-next": "12.0.1",
"postcss": "^8.3.11",
"tailwindcss": "^2.2.19"
}
}
next.config.js 文件
module.exports = {
swcMinify: true,
reactStrictMode: true,
experimental: {
concurrentFeatures: true,
serverComponents: true,
},
};
并且根据 nextjs 文档,我们必须更新我们的 _document.js 文件
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
我的 global.css 文件
@tailwind base;
@tailwind components;
@tailwind utilities;
但是,如果我删除了实验性功能,它只是文件
像这样
module.exports = {
swcMinify: true,
reactStrictMode: true,
};
奇怪,但是在我构建后它可以工作