Next.js项目实战踩坑指南(笔记)

Next.js项目实战踩坑指南小结——长沙网络推广经验分享

前言

在数字时代，技术更新迅速，每一次挑战都是成长的机遇。我使用Next.js开发项目的两个月中，遇到了一些问题，经过不断的摸索与尝试，现在决定分享给大家，希望能够为大家带来帮助。这不仅仅是技术的交流，更是对问题解决能力的锻炼。接下来，我将详细介绍在开发过程中遇到的疑难杂症及解决方案。

疑难杂症及解决方案

1. 移动端滚动卡顿问题：在iOS设备上，当使用overflow:auto时，滚动可能会卡顿。解决方案是给主容器增加样式`-webkit-overflow-scrolling: touch;`，这样滚动会更加流畅。

2. 开发模式下路由跳转后样式丢失问题：在开发环境下，样式会根据页面动态加载。当路由切换时，浏览器缓存的styles.chunk.css文件可能导致样式不更新。解决方案是利用版本号强制重载样式文件。以下是代码示例：

示例1：在Layout组件中修改标题和样式链接：

```jsx

{process.env.NODE_ENV !== 'production' && }

```

示例2：在_app.js中使用Router事件进行样式重载：

```jsx

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键盘弹起导致页面布局变化问题：当Android键盘弹起时，页面可能会变小，尤其是使用flex、position absolute或fixed布局时。为了解决这个问题，我们将body的高度设置为浏览器窗口的高度。示例代码如下：`doc.body.style.height = docEl.clientHeight + 'px';`。

4. 跨域及传递cookie问题：登录成功后需要从API服务器接收cookie。跨域接收cookie的解决办法是设置API服务器的Access-Control-Allow-Origin为请求地址的IP（测试环境可动态设置，生产环境则设置特定的域名或IP）。浏览器会自动缓存cookie并在后续请求中携带。无论是fetch还是axios请求，默认都不带cookie，需要通过配置开启。对于fetch，配置为 `{ credentials: 'include', mode: 'cors' }`；对于axios，配置为 `axios.defaults.withCredentials=true;`。还可以使用服务器代理通过内网访问API。我们公司采用的解决方案包括前端服务器代理和dns。通过NODE_ENV环境变量配置开发和生产环境的API地址。整体流程可通过图示进行展示。

这些解决方案都是在实际项目中摸索出来的，希望能够为大家带来帮助。每一个挑战都是成长的机会，愿我们在技术的道路上越走越远。在前端开发中，环境配置与后端API请求的适配问题至关重要。本文将为您深入解读如何在不同的环境下设置后端API地址，并处理服务端渲染时的带cookie请求问题。

关于环境配置，我们通过`process.env`来判断当前的环境是生产环境还是开发环境。根据不同的环境，我们设置不同的后端API地址。对于客户端渲染请求，我们使用相对地址，这些请求会被前端服务器代理到API服务器。而对于服务端渲染请求，我们使用的是API服务器的实际地址，这个地址仅供内网访问。

接下来，让我们深入服务端渲染时带cookie的请求问题。在处理这个问题时，我们采用了一个插件并在_app.js中进行全局的cookies，将其注入到ctx中。在获取初始页面属性时，我们ctx中的cookies，并通过页面请求将其发送到服务端。这样，我们就可以在服务端处理带有cookies的请求了。

具体实现上，我们在`getInitialProps`函数中添加了获取cookies的逻辑。在这个函数中，我们首先ctx中的cookies，然后通过store的dispatch方法将相关数据（包括navTitle和isHome）发送到服务端。在proxyFetch中，我们根据isServer的值来判断是服务端API请求还是客户端API请求。如果是服务端请求，我们会把cookies写入Fetch的header中。

具体的代码实现如下：

```javascript

const isProd = process.env.NODE_ENV === 'production';

process.env.BACKEND_URL = isProd ? '/relative_url' : '

process.env.BACKEND_URL_SERVER_SIDE = isProd ? ' : '

// 在 _app.js 中全局 cookies 并注入 ctx

static async getInitialProps({ Component, ctx }) {

let pageProps = {};

let cookies = parseCookies(ctx);

if (Component.getInitialProps) {

pageProps = await Component.getInitialProps({ ctx, cookies });

}

return { pageProps };

}

// 在页面请求中处理 cookies

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 的值进行请求处理

const prefix = isServer ? process.env.BACKEND_URL_SERVER_SIDE : process.env.BACKEND_URL;

isServer && (this.headers['cookie'] = 'EGG_SESS=' + cookies['EGG_SESS'] + ';');

fetch(prefix + url, { headers: this.headers, ...thisit, ...options })

```

本文的内容就到这里结束了，希望能对大家的学习有所帮助。也希望大家能够多多支持狼蚁SEO，我们会持续为大家带来前端开发的资讯和。