Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of the actual combat pit of the Next.js project, the introduction in the article is very detailed, has certain reference value, interested friends must read it!

Preface

Github: https://github.com/code-coder/next-mobile-complete-app

I have been using Next.js for almost two months, and the project has been tested. Here is a summary of some thorny problems encountered in the development process and deployment.

difficult miscellaneous diseases

1. Mobile overflow:auto,ios roll stutter

Solution: add style to the main container-webkit-overflow-scrolling: touch

2. The style is lost after dev mode route is redirected.

Reason: the style under dev is loaded dynamically according to the page, and the browser cache file styles.chunk.css causes the style not to be updated.

Solution: force the style file to be reloaded with the version number

Example 1:

/ / in the Layout component {title} {process.env.NODE_ENV! = = 'production' & & ()}

Example 2:

/ in _ 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=' + timest}})

3. Android keyboard pop-up window will become smaller, with flex or position is absolute or fixed layout will change

Here, body.height is directly set to the window height of the browser.

Doc.body.style.height = docEl.clientHeight + 'px'

4. Cross-domain and transfer cookie

In the first step, the api server returns cookie after a successful login.

To receive cookie for cross-domain access, the solution is very simple. You only need the API server to set the value of Access-Control-Allow-Origin to the ip of the request address based on the request address (the ip can be set dynamically in the test environment, and the specified domain name or ip address can be set in production).

The second step, the browser automatically caches, and then carries this cookie in subsequent requests.

Fetch or axois requests do not come with cookie by default and need to be opened through option configuration.

-fetch to configure `{credentials: 'include', mode:' cors'}`

-axois to configure `axios.defaults.withCredentials=true; `

In addition, api can be accessed via the intranet through the server agent.

The following are the solutions adopted by our company:

To solve the problem of modifying api addresses across domains and deploying different servers, we use front-end server proxy + dns parsing. The whole process is shown in the following figure:

The development and production addresses are configured through the NODE_ENV environment variable.

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, / / client rendering request, which is a relative address. When the front-end server is proxied to the API server' process.env.BACKEND_URL_SERVER_SIDE': process.env.BACKEND_URL_SERVER_SIDE / / server rendering request, it is the API server address and can only be accessed via the intranet}.

5. The problem of server rendering with cookie request

A plug-in is used here called nookies.

Parse the cookies injection ctx globally in _ app.js:

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};}

You can then request through the page:

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

In proxyFetch, you can tell whether it is a server-side API request or a client-side API request based on the isServer value. The server request writes the cookies to the header of the Fetch.

Const prefix = isServer? Process.env.BACKEND_URL_SERVER_SIDE: process.env.BACKEND_URL;isServer & (this.headers ['cookie'] =' EGG_SESS=' + cookies ['EGG_SESS'] +';';) / fetch Core fetch (prefix + url, {headers: this.headers,... this.init,... options}) these are all the contents of the article "example Analysis of the actual combat pitfalls of the Next.js project". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.