Next.js 笔记

NEXT 中文文档地址！

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

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

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

11. next.js 引入@zeit/less需要将antd的按需加载style改为true。
12. Emmmm... postCss/postCss-use 使用方法没找到文档也是很JB蛋疼哦 有人看的话评论找我哦。
13. Emmmm... Next.js 官方的example都是还是可以参考的，不过类似antd自定义样式引入缓动颜色方案还真的是头疼哦。