We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
依赖版本说明
Next.js
tailwindcss
postcss
antd
Next.js 自 9.4 起自动支持 tsconfig.json 和 jsconfig.json 中的 "paths" 和 "baseUrl" 选项,因此可以不在 webpack 配置项中配置模块路径别名
9.4
tsconfig.json
jsconfig.json
"paths"
"baseUrl"
webpack
新建 tsconfig.json 或者 jsconfig.json 文件
项目不使用 TypeScript 时使用 jsconfig.json 进行配置
TypeScript
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }
修改 next.config.js 文件
next.config.js
const path = require('path') /** @type {import('next').NextConfig} */ const nextConfig = { webpack: (config) => { config.resolve.alias['@'] = path.resolve(__dirname, 'src') return config } } module.exports = nextConfig
Absolute Imports and Module Path Aliases | Next.js
# 安装依赖 npm i -D tailwindcss postcss autoprefixer # 生成配置文件 npx tailwindcss init -p
tailwindcss init -p 源码
Install Tailwind CSS with Next.js
# 安装依赖 npm i antd@4 @ant-design/icons@4
修改 src/pages/_app.tsx 文件
src/pages/_app.tsx
+ import 'antd/dist/antd.variable.min.css' import '@/styles/globals.css' import type { AppProps } from 'next/app' import { ConfigProvider } from 'antd' + ConfigProvider.config({ + theme: { + primaryColor: '#abcdef' + } + }) export default function App({ Component, pageProps }: AppProps) { return <Component {...pageProps} /> }
动态主题
安装依赖
npm i next-plugin-antd-less npm i -D babel-plugin-import
添加 .babelrc.js 文件
.babelrc.js
module.exports = { presets: [['next/babel']], plugins: [['import', { libraryName: 'antd', style: true }]] }
const withAntdLess = require('next-plugin-antd-less') /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true } module.exports = withAntdLess({ ...nextConfig, modifyVars: { '@primary-color': '#abcdef' } })
next-plugin-antd-less
封装一个组件使用 cloneElement 对 children 进行拦截处理
cloneElement
children
active-class-name
修改 src/pages/_app.tsx 配置默认 Layout
Layout
import Header from '@/layout/Header' import Footer from '@/layout/Footer' export default function App({ Component, pageProps }: AppPropsWithLayout) { const getLayout = Component.getLayout ?? ((page) => ( <section> <Header /> {page} <Footer /> </section> )) return getLayout(<Component {...pageProps} />) }
在需要自定义 Layout 的页面添加 getLayout 方法
getLayout
const Login = () => <div>登录页</div> Login.getLayout = (page) => page export default Login
在 Next.js 13 中提供了一种新的自定义 Layout 的方法 Migrating the getLayout() pattern to Layouts (Optional)
Next.js 13
静态 HTML 导出不需要 Node.js 服务,即可独立运行,适用于页面内容在构建时就能确定的场景(静态官网、文档网站等)
HTML
Node.js
修改 package.json
package.json
{ "scripts": { "export": "next build && next export" } }
Static HTML Export | Next.js
{ "scripts": { "dev": "next dev -p 4000" } }
Development | Next.js
const isDevelopment = process.env.NODE_ENV === 'development' /** @type {import('next').NextConfig} */ const nextConfig = { /* 构建输出目录 */ distDir: isDevelopment ? '.next_dev' : '.next', /* 静态资源前缀 */ assetPrefix: isDevelopment ? undefined : './', /* 应用基础路径 */ basePath: '' } module.exports = nextConfig
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Next.js 搭建官网踩坑小记
Next.js
13tailwindcss
3.xpostcss
8.xantd
4.x配置模块路径别名
Next.js
自9.4
起自动支持tsconfig.json
和jsconfig.json
中的"paths"
和"baseUrl"
选项,因此可以不在webpack
配置项中配置模块路径别名新建
tsconfig.json
或者jsconfig.json
文件使用 webpack 进行配置
修改
next.config.js
文件Absolute Imports and Module Path Aliases | Next.js
使用 tailwindcss
tailwindcss init -p 源码
Install Tailwind CSS with Next.js
使用 antd 4.x
# 安装依赖 npm i antd@4 @ant-design/icons@4
自定义主题
方案一:使用 Variable 方案
修改
src/pages/_app.tsx
文件动态主题
方案二:使用 Less 方案
安装依赖
添加
.babelrc.js
文件修改
next.config.js
文件next-plugin-antd-less
导航栏高亮选中
封装一个组件使用
cloneElement
对children
进行拦截处理active-class-name
配置 Layout
修改
src/pages/_app.tsx
配置默认Layout
在需要自定义
Layout
的页面添加getLayout
方法在
Next.js 13
中提供了一种新的自定义Layout
的方法 Migrating the getLayout() pattern to Layouts (Optional)静态 HTML 导出
静态
HTML
导出不需要Node.js
服务,即可独立运行,适用于页面内容在构建时就能确定的场景(静态官网、文档网站等)修改
package.json
Static HTML Export | Next.js
其他配置项
修改启动端口
修改
package.json
Development | Next.js
相关路径配置
The text was updated successfully, but these errors were encountered: