江苏龙网

  1. 主页 > 生活百科 > >

记一次使用next.js开发官网经历( 二 )

next.js

可以看到我们使用了@zeit/next-css 和@zeit/next-less模块，这两个模块都是next.js中用来支持使用样式文件的 。使用之前请先npm install 安装它们 。在next.config.js文件中，可以自定义webpack配置，可以看到我这里配置了lessLoaderOption 用于动态设置antd主题色，distDir，用于声明打包之后的文件地址，还有一些图片，svg等加载配置 。使用之前都必须安装其对应的wenpack loader 。这样你的项目中才能使用静态图片等文件 。
到此为止已经可以正常使用antd，但是如果你想自定义antd主题色，怎么处理？ 根目录新建asserts文件夹，文件夹中建立antd-customs.less 和styles.les文件，分别加入以下css样式
@primary-color: #29CCB1;@layout-header-height: 40px;@border-radius-base: 4px;@import "~antd/dist/antd.less";@import "./antd-custom.less";然后在pages下建立_app.js文件，在文件中加入以下代码
import App from 'next/app'import '../asserts/styles.less'export default Appok，你自定义的antd主题已经可以生效了 。
当你需要在项目中配置跨域，怎么操作呢？next.js支持自定义server 。同样在根目录下，新建server.js, 加入如下代码：
// server.jsconst express = require('express')const next = require('next')const { createProxyMiddleware  } = require('http-proxy-middleware')const devProxy = {    '/api/v': {        target: 'http://192.168.3.18:8092', // 端口自己配置合适的        // pathRewrite: {        //     '^/api': '/'        // },        changeOrigin: true    }}const port = parseInt(process.env.PORT, 10) || 80const dev = process.env.NODE_ENV !== 'production'const app = next({    dev})const handle = app.getRequestHandler()app.prepare()    .then(() => {        const server = express()        if (dev && devProxy) {            Object.keys(devProxy).forEach(function(context) {                server.use(createProxyMiddleware (context, devProxy[context]))            })        }        server.all('*', (req, res) => {            handle(req, res)        })        server.listen(port, err => {            if (err) {                throw err            }            console.log(`> Ready on http://localhost:${port}`)        })    })    .catch(err => {        console.log('An error occurred, unable to start the server')        console.log(err)    })然后 在package.json文件中 配置：
  "scripts": {    "dev": "node server.js",    "build": "next build",    "start": "cross-env NODE_ENV=production node server.js"  },这样一整套流程下来，你就可以开心的进行业务开发了 。看一下完整的项目结构：

记一次使用next.js开发官网经历

文章插图
 
其他的next相应知识点，大家可以到官网https://nextjs.frontendx.cn/docs查看具体知识点 。
提示：以上流程在进行过程中如果提示你缺少某模块，直接npm install先安装一下就可以解决 。7.结语有部署或者其他开发方面的问题，可以留下评论交流 。


推荐阅读


上一篇：红茶拿铁和奶茶的区别,抹茶拿铁咖啡做法大全

下一篇：进入春茶采摘季,雨林古茶坊惊艳原始雨林古树春茶作品