Next.js项目实战踩坑指南

2019年8月20日 223次阅读 来源: 张豆豆

项目实战踩坑指南

1. 挪动端overflow:auto，ios转动卡顿

处理方案： 主容器增添款式-webkit-overflow-scrolling: touch;

2. dev mode路由跳转后款式丧失

缘由：dev下款式依据页面动态加载，浏览器缓存文件styles.chunk.css形成款式不更新。
处理方案： 应用版本号强迫重载款式文件
示例1：

// 在Layout组件中
<Head>
    <title>{title}</title>
    {process.env.NODE_ENV !== 'production' && (<link rel="stylesheet" type="text/css" href={'/_next/static/css/styles.chunk.css?v=' + Router.route} />)}
</Head>

示例2：

// 在_app.js中
import Router from 'next/router';

Router.events.on('routeChangeComplete', () => {
  if (process.env.NODE_ENV !== 'production') {
    const els = document.querySelectorAll('link[href*="/_next/static/css/styles.chunk.css"]');
    const timestamp = new Date().valueOf();
    els[0].href = '/_next/static/css/styles.chunk.css?v=' + timestamp;
  }
});

3、Android 键盘弹起窗口会变小，有 flex 或许 position 是 absolute 或许 fixed 规划会变

这里直接把body.height设置为浏览器的窗口高度。

doc.body.style.height = docEl.clientHeight + 'px';

4、跨域及通报cookie的题目

第一步，登录胜利后api服务器返回cookie。

跨域接见要吸收cookie，处理办法也很简单只须要API服务器依据要求地点设置Access-Control-Allow-Origin的值为要求地点的ip就能够了（测试环境能够动态设置这个ip，临盆能够设置指定的域名或许ip地点）。

第二步，浏览器自动缓存，再后续要求中照顾此cookie。

fetch或axois要求都默许不带cookie，须要经由过程option设置翻开。

- fetch要设置`{ credentials: 'include', mode: 'cors' }`

- axois要设置`axios.defaults.withCredentials=true;`

别的，还能够经由过程服务器代办走内网接见api。

以下为我们公司所采纳的处理方案：

为了处理跨域以及布置差别服务器须要修正 api 地点的题目，我们运用 前端服务器代办 + dns 剖析。全部流程如下图所示：
《Next.js项目实战踩坑指南》

经由过程NODE_ENV环境变量来设置开辟和临盆的地点。在env-config.js中

const isProd = process.env.NODE_ENV === 'production';
process.env.BACKEND_URL = isProd ? '/relative_url' : 'http://text.api.com';
process.env.BACKEND_URL_SERVER_SIDE = isProd ? 'http://bff.api.com' : 'https://prod.api.com';

module.exports = {
  'process.env.BACKEND_URL': process.env.BACKEND_URL, // 客户端衬着要求，是个相对地点，在前端服务器被代办到API服务器
  'process.env.BACKEND_URL_SERVER_SIDE': process.env.BACKEND_URL_SERVER_SIDE, // 服务端衬着要求，是API服务器地点，仅供内网接见
  'process.env.LOCATION_PREFIX': process.env.LOCATION_PREFIX
};

5、服务端衬着时带 cookie 要求的题目

这里用到一个插件叫nookies。

在_app.js中全局剖析cookies注入ctx:

static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    let cookies = {};
    if (ctx.isServer) {
      cookies = parseCookies(ctx);
    }
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps({ ctx, cookies });
    }

    return { pageProps };
  }

然后就能够经由过程页面要求：

static async getInitialProps({ ctx }) {
    const { store, req, isServer, cookies } = ctx;
    store.dispatch(setNav({ navTitle: 'Home', isHome: true }));
    store.dispatch(getDataStart({ settings: { isServer, cookies } }));
  }

在proxyFetch中就会依据isServer的值来区分是服务端API要求照样客户端API要求。服务端要求会把cookies写入Fetch的header中。


const prefix = isServer ? process.env.BACKEND_URL_SERVER_SIDE : process.env.BACKEND_URL;
isServer && (this.headers['cookie'] = 'EGG_SESS=' + cookies['EGG_SESS'] + ';';)
// fetch中心
fetch(prefix + url, { headers: this.headers, ...this.init, ...options })

6、须要布置到域名下的二级目次如：www.example.com/project

在某些公司的营业场景下：如同享cookie等需求，则须要将项目布置到域名的一个二级目次下。

这时刻须要修正设置文件next.config.js：

module.exports = withSass({
    assetPrefix: process.env.NODE_ENV === 'production' ? '/project' : ''
});

这个设置文件是修正next在build的时刻指向的根目次地点。然则因为Next.js的路由根目次为pages，客户端的路由跳转后，天生的window.location.href地点会疏忽二级目次。

比方：假定我们的服务器地点为http://www.example.com/project，然后在首页运用Router.push('/login')跳转登录页面，浏览器会直接追加到域名+端口后天生http://www.example.com/login的地点。而我们现实的服务器地点是http://www.example.com/projec…，跳转后再革新页面会报404。

这时刻候须要运用next供应的as参数（Router.push的第二个参数，link标签的as属性）。二级目次的地点能够写在process.env中。

每次运用路由时都要加上as参数，这时刻能够封装Link组件和Router来削减过剩代码。

CustomLink.js文件

import React, { Component } from 'react';
import Link from 'next/link';

export default class CustomLink extends Component {
  render() {
    const { href, as: asHref, children, ...props } = this.props;
    return (
      <Link href={href} as={asHref || process.env.LOCATION_PREFIX + this.props.href} {...props}>
        {children}
      </Link>
    );
  }
}
    原文作者：张豆豆
    原文地址: https://segmentfault.com/a/1190000017188709
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞