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