当前位置: 首页 > 工具软件 > Next.js > 使用案例 >

Next.js 笔记

潘志国
2023-12-01

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自定义样式引入缓动颜色方案还真的是头疼哦。

转载于:https://www.cnblogs.com/universe-cosmo/p/10987778.html

 类似资料: