Next. Js Step on the pit entry series

  • Hello Next. Js
  • Add Antd && CSS
  • (3) Directory reconstruction && routing again
  • (4) Next. Js intermediate pit filling
  • (5) Introduce state management Redux
  • (6) Reconstruct the directory again
  • (7) Other relevant knowledge

Fill in the pit

The first pit – params routing

It turns out that, as I thought, you can use the Custom Server and then re-match the page rendered by the route. However, there will be a small problem, that is, when the network speed is too slow to match the page before rendering, the console will appear an error, after re-rendering disappeared. This is similar to 302, starting as a 404 page and then being redirected to another

If you look at the console, you will get an error, but it does succeed in using params’ routing. And I found a problem, when entering a new page for the first time, the Next. Js rendering is very slow, I don’t know whether it is a bug, or I write something wrong, more research ~

An error problem

Ok, I went to Github, the official website, and someone raised the same issue as me. Finally, I found that there was something wrong with the original writing method. Although it could be executed normally, it would be below 404 before the correct page appeared. I can’t stand being a Virgo. I’d better change back

<Link href={' /user/userDetail? username=${text}`} as={`/user/userDetail/${text}`}> <a>{text}</a> </Link> // server.js server.get('/user/userDetail', (req, res) => { return app.render(req, res, `/user/userDetail/${req.query.username}`); });Copy the code

The above is ok, the specific code below ~

Pit 2 – The first time antD is loaded in development mode, the style does not appear

Finally, I changed the CSS form of ANTD to less. On the one hand, it is necessary to configure the theme color and other overlay styles. On the other hand, it is important that the pending time of next. This excessively long pending time causes the first ANTD style to fail to load. Switching to less was slow, but the style didn’t change, so I switched to less.

  • Antd – CSS mode

  • Antd – less mode

It can be seen that the same is to render a table component to a new page, although the first load time is very long, but the form of less can be loaded out of the CSS. Ha ha. So still use less, under the development mode, all pages of the second time add no problem, also very fast.

The production environment of next. Js is still relatively fast, and the development environment is slow to open a new page for the first time, which takes about 10 seconds.

Production mode

As you can see in the screenshot above, the first pending time of the page in the development mode of Next. Js is very long, and it usually reaches about 10s. Of course, there may be something wrong with the code I wrote. However, I went to the official demo below a random use, is also very slow.

I can’t help thinking, if the first load of online projects is also so slow, how can it? When I was considering whether to give up halfway, I tried packaging with production mode. If the first loading of the production environment after packaging is also very slow, then it is not bullshit? Goodbye to you

Because I’m using custom-server, scripts will look like this:

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "set NODE_ENV=production && node server.js"
  },
Copy the code

After the package is also normal access, the following is the package after the access effect.

As you can see, whether it is the first time to load a page, or the first time to enter another page, the speed is quite fastSo I forgive the slow pace of development and keep learning

Summary && preview

This article is a little water, but I think it is quite necessary, because maybe not only me, a lot of people will also encounter this problem, if not solved, it may give up halfway, so I want to add this article in the middle of the pit and the solution ~ code address

Introducing state management Redux+redux-saga