This is the fourth day of my participation in the August Text Challenge.More challenges in August

preface

I have written a lot of articles about Next. Js series before, so I have gained a lot of friends. I can’t say how well I use Next. Before, due to personal reasons, Next. Js was mostly in the use stage, and due to work reasons, I did not write the Next. Js project for about one and a half years. Therefore, I prepared a series – “Relearning Next. Js”, hoping to revisit this old friend from a deeper perspective. The article may be divided into several directions to see how it feels to write randomly:

  • 1 – Practice series. Advanced usage, best practices, use of new features, and so on.

  • 2 – Source code series. Since to more in-depth, then the source can not hide in the past, or to chew.

  • 3 – Translation series. Translation of many foreign big cow articles, in fact, Next. Js audience, or the majority of foreign. If it is a translation, the author’s permission will be sought.

Without further ado, I started my first article. The first article was a simple yo-yo. The last one and a half years ago, I used Next. There are a lot of new features are not clear, so I found an article or document from the official website more accurate, translated and simple and practical, understand their own understanding and with the Demo, to tell you 10 advanced usage you should master when using next.js.

[Note] : If you don’t like to read Chinese, or just like to watch the original version, you can directly click here – the original link, this article is not literal translation, will be accompanied by personal analysis summary and code.

I-next-js Redirects — directs

Js Version 9.5: >= Next

[Function] : Redirect the original path to a new path.

The original path contains any accessible path within your application, including routes in the Pages folder and static resources in the Public folder.

The important parameters

  • source: The path of the incoming request, which is the original path
  • destinationTarget path, redirect to target path
  • permanentIs a permanent redirect, if yestrueIt’s a permanent redirect which is 302 if it’s zerofalseIt’s temporary. It’s 301.

For more parameters and details, go to next-js Redirects

The sample code

// next.config.js

module.exports = {
  async redirects() {
    return[{source: '/home'.destination: '/'.permanent: true,},]},}Copy the code

The above code redirects the /home path to/to see the effect in action.

As you know, the pages folder is automatically interpreted to register routes, so there is only one “/” route in the system, not “/home” route. Normally, if you don’t use “redirect”, this is 404. Now we use the redirects. See how it works.

As you can see, 404 is not displayed, but input /home directly to help us redirection, in addition to the multilevel path matching function, very powerful, interested in the actual use of their own to see the effect.

Ii-next-js Rewrites — Rewrites

“Redirects” takes us to “Rewrites,” an official cousin of “Rewrites.”

Js Version 9.5: >= Next

[Function] : The original path as a proxy to shield the target path.

When you look like you are accessing the destination path, but in fact the page interaction and effect are the original path, simply put, the user does not perceive, because rewriting does not change their location on the site.

The sample code

 <Link href="/list">
    <a className={styles.card}>
      <h2>List &rarr;</h2>
      <p>List List page.</p>
    </a>
 </Link>

<Link href="/rewrites">
    <a className={styles.card}>
      <h2>Rewrites &rarr;</h2>
      <p>Routing/rewrites.</p>
    </a>
</Link>
Copy the code
// next.config.js

async rewrites() {
    return[{source: '/rewrites'.destination: '/list',}},Copy the code

/rewrites/index/index/index/index/index/index/index

It is very clear that we are accessing a page /rewrites that does not exist in the routing system. It should have been 404, but because we overwrote it, we ended up with the page corresponding to the /list route.

What’s the difference between Rewrites and Redirects?

So it looks like Rewrites and Redirects do pretty much the same thing, so why directs? What’s the difference between these two? Don’t worry, here’s a brief analysis:

  • Different forms of expression

Taking a closer look at the effects of the above two Demo screenshots, Redirects and Rewrites differ in two ways.

1 – First point: directs presents destination (” destination “), while Rewrites presents source (” meta “).

2 – Second point: the actual effects of the page are different. Redirects presents an effect similar to refreshing the page or tag, which looks like separating from the site, while Rewrites presents an effect of front-end routing within the site, without refreshing the jump process.

If the screenshot doesn’t show up, you can try it out for yourself.

  • Different call times at compile time

Redirects is called before checking the entire file system pages and public.

Rewrites is called after checking the entire file system pages and public and before generating dynamic routes.

If you don’t understand the above two sentences, let’s look at them in code:

// next.config.js

 async redirects() {
   return[{source: '/home'.destination: '/'.permanent: true}, {source: '/rewrites'.destination: '/list'.permanent: true,}},async rewrites() {
   return[{source: '/rewrites'.destination: '/list',}},Copy the code

Re-directs/Rewrites to /list. Re-directs/Rewrites to /list. Re-directs/Rewrites to /list. Using “/list”, we know the order of “rewrites” and “rewrites”.

The final effect is the same as above, showing that Redirects is called first, and rewrites is called later. To sum up, although the two apis have many similarities, there are essential differences, so they are still two apis, which need to be used according to the scenario.

III – Next. Js Preview Mode — Preview Mode

>= next.js Version 9.3

[Features] : For CMS website, do some draft preview function in advance.

Preview mode allows developers to view drafts of statically generated content before publishing it to the Web. Next.js is able to generate these draft pages at request time rather than build time so that developers can see how their content will look when published.

The application scenarios of preview mode are rarely used in the normal development process, so I will not introduce too much here. If you happen to have similar scenarios, such as CMS, you can go to the official website for relevant content. I think the application scenarios are not enough and I haven’t used them much. It’s just a waste of time to introduce them. It’s better to go to the official website.

Iv-hooking into Build Process — Build Process hook

Next. Js is a framework that uses convention more than configuration. Most of the common basic functions of the Next. It opens up a portal for developers to do things like Webpack configuration, sitemap creation, etc. Details on configuration can be found here in the -> next-config.js document.

V – Next.js with Preact

It is well known that next.js is based on the react. js framework, but the react. js framework itself is not lightweight. Next. Js supports switching react.js to preact.js to reduce volume.

The sample code

 "dependencies": {
    "next": "11.1.0"."preact": "^ 10.5.14"."preact-render-to-string": "^ 5.1.19"."react": "17.0.2"."react-dom": "17.0.2"
 },
Copy the code
// next.config.js

 webpack: (config, { dev }) = > {
    // Replace React with Preact only in client production build
    if(! dev) {Object.assign(config.resolve.alias, {
        react: 'preact/compat'.'react-dom/test-utils': 'preact/test-utils'.'react-dom': 'preact/compat'
      });
    }

    return config;
 }
Copy the code

React can be replaced seamlessly with Preact with a very simple configuration, and we only need to enable the replacement in the production environment, so it avoids the problem that we need to familiarize ourselves with Preact knowledge during the development process.

  • React

  • Preact

For the same project, the core JS file using react.js is generally about 30 Kb larger than the single file using preact. js. When the number of routing systems is increased, tens of hundreds of pages are available, which is still a considerable reduction in size.

conclusion

Because ten o ‘clock together to finish the content is too much for everyone to digest, so the remaining five points in the next article to introduce you, the remaining five points are more interesting, please look forward to ~

The project address