Next.js: 5 things you should know about this framework

If you are looking for a framework that allows you to quickly create web applications, then you should turn to Next.js. This is a technology that has gained favor among developers in recent years due to its many features and benefits.

On their website they define it as “a flexible React framework that gives you the building blocks to build fast web apps.” They emphasize speed, an aspect of great value in today's world, where technology must be updated minute by minute.

Five things you may not have known about Next.js

In addition to its typical functions, Next.js offers other tools and aspects to its users that are not very well known and here we are going to explain the five most important ones:

Next.js Redirects

This is a new feature added in the version released in July 2020 and works to redirect an incoming request route to another destination. Among the ways in which a source route can be redirected are route matching, regular expression route matching, and wildcard routes.

In addition to this, the redirects key can be used to create an asynchronous function to return an array of objects, each of which has properties for a redirect.

// next.config.js

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

Next.js Rewrites

The rewrites, or rewrites, also arrived with version 9.5 and have a similar operation to the redirects. When a redirect redirects a page with 301/302 code, the rewrite acts as a proxy and masks a new route. In the user experience, the user will not feel the change of location on the site.

“The same rules apply for rewrites as for redirects, except that rewrites cannot overwrite public files or paths that are automatically generated from the pages folder. These routes have priority over the rewrites” they point out in Vercel.

// next.config.js

module.exports = {
  async rewrites() {
    return [
      {
        source: '/about',
        destination: '/',
      },
    ]
  },
}

Preview mode

With this useful feature, the Next.js developer has the ability to preview statically generated content before publishing it to the web. The framework generates this draft-style page at request time and not at build time, so the developer can preview the content first and fix any errors present.

Connection to the build process

Vercel explains “With Next.js, we can use the next.config.js file to override defaults, configure Webpack, or inject code into the build process. By running a script during the build process to inject code, Next.js can create a sitemap, RSS feed, or search index with ease.”

Next.js and Preact

If the developer is building a Next.js app and doesn't want or can't use React, they can now turn to Preact. This can be used only in the production build so as not to lose any features in local development. As a tip, you can use next.config.js and override the already default Webpack configuration.

// next.config.js

module.exports = {
  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'
      });
    }

    returnconfig;
  }
};

Development using Next.js will now be easier and faster by making use of these tips. At Rootstack we have a team of Next.js experts who have been able to solve technical problems for our international clients.

If you want to be part of this team, just click here and one of our recruiters will contact you.

We recommend you on video