Next.js 笔记

最新推荐文章于 2024-12-25 00:22:19 发布

转载最新推荐文章于 2024-12-25 00:22:19 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/universe-cosmo/p/10987778.html

文章标签：

#webpack #操作系统 #ViewUI

本文深入探讨Next.js的高级配置技巧，包括服务端渲染、自定义接口设置、Webpack优化、绝对路径配置、IE11兼容性、Link标签优化、环境变量处理、按需加载、null-loader使用及Ant Design集成等。

NEXT 中文文档地址！

next.js 只有服务端使用的包需要做单独处理，无需打包到项目中，可以使用@zeit/next-bundle-analyzer观察代码。
Router.beforePopState() 截断Router操作的设置只有在客户端生效（需在componentDidMount中设置）且进入此函数中的方法只有Router栈中有值的时候才可以！
next.js 中设置绝对路径的方法是在next.config.js中wepack方法中的config参数增加配置。
next.js 中配置自定义接口可以使用自定义启动参数，创建 server.js 通过 node server.js 启动。
next.js 支持IE11和各主流浏览器 IE11以内的IE版本不支持。
Link 标签passHref属性可以强制给子元素传递href属性，有利于SEO优化。
windows 不支持 NODE_ENV=development的设置方式导入 cross-env 然后运行时在前面添加 cross-env 即可解决。

webpack 配置自定义的时候覆盖配置需要继承本有的配置，否则会使 next 解析错误(analysis error)。

module.exports = {
    // ... other next.js config
    return {
        webpack: config => {
            config.resolve.alias = {
                ...(config.resolve.alias || {}),
                // custom webpack aliases
            }
            return config
        }
    }
}

null-loader 加载器的一个用途是关闭依赖项导入的模块。例如，你的项目依赖于导入你不需要的polyfill的ES6库，因这里删除它将导致不会丢失功能。测试polyfill的路径，它将不包含在你的包中。

next.js 引入antd @zeit/next-css babel-plugin-import 按需加载无法正确编译css文件需要在next.config.js中配置服务端渲染方可。

const withCss = require('@zeit/next-css')

module.exports = withCss({
    webpack: (config, { isServer }) => {
        if (isServer) {
            const antStyles = /antd\/.*?\/style\/css.*?/
            const origExternals = [...config.externals]
            config.externals = [
                (context, request, callback) => {
                    if (request.match(antStyles)) return callback()
                    if (typeof origExternals[0] === 'function') {
                        origExternals[0](context, request, callback)
                    } else {
                        callback()
                    }
                },
                ...(typeof origExternals[0] === 'function' ? [] : origExternals),
            ]

            config.module.rules.unshift({
                test: antStyles,
                use: 'null-loader',
            })
        }
        return config
    },
})