Nextjs : Why it's worth your time.

Ok firstly, I digress, I am a massive fan of Reactjs. I can usually be seen gushing about is it on my Twitter or Instagram, however, without a doubt, the question I get asked the most when talking about front-end how to make a SPA(single-page-application) SEO friendly?

"And my friend here Nextjs comes to help us"----

We live in the age of server-side rendering and performance is very crucial for every app. Next.js is great at this. Here are a few reasons why you should check it out.

React.js and other front-end libraries and frameworks have long since become the norm in modern web development — indeed, with technologies like React Native, React 360, React can be used in mobile and VR development respectively.

But development continues, of course, and there are even newer technologies available and always will, including new frameworks and libraries that are designed to make our work with the original ones even sweeter. For React.js, for example, there are the frameworks Gatsby and Next.js, the latter of which we’ll cover now.

"Let's dive deep into Nextjs here, but wait what does nextjs helps us with??"--

Next.js is a React.js framework used for many purposes. Where it was originally designed to render the React App SSR app (server-side-render), Next.js now allows you to generate static pages and to use AMP in your app. It’s very easily connected to Node.js for its production state.

Next.js is very similar to the React.js we know. You set up a Next project differently, of course, but in the end, you write React code. And due to this fact, we can use our React knowledge to write more efficient and effective code.

"....let's start now" -----

• Create an empty folder for your Next project. Inside of it, type:
• yarn init -y
• yarn add react react-dom next
• mkdir pages
• Inside of the pages folder, we’ll create all the pages of our Next app. So far, your project folder should look like this:
• ├── package.json
• ├── pages
• │ └── index.js
• └── yarn.lock
• Now, we need to adjust our packages.json file, like this:

“scripts”: {
  “dev”: “next”,
  “build”: “next build”,
  “start”: “next start”,
  “export”: “next build && next export”
}

As you should be able to see, now we can run yarn run dev to start our development server. To build a production version, we can run yarn run build and run yarn start to run our production server.

"Now let's talk about the advantage and when to use Nextjs" ---

Better Performance

When comparing server-side rendering (SSR) with client-side rendering (CSR), which is standard with React.js, the argument in favour of SSR is usually given first. And to put it bluntly: Yes, in many situations, SSR pages are faster than client-side ones.

Below a difference of a vanilla Reactjs and Nextjs comparison in practical life -

First, the Vanilla React.js version:

Second, the same audit was done with Next.js:

Automatic Routing

Any URL is mapped to the filesystem, to files put in the pages folder, and you don't need any configuration (you have customization options of course).

Single File Components

Using styled-jsx, completely integrated as built by the same team, it's trivial to add styles scoped to the component.

Ecosystem Compatibility

Next.js plays well with the rest of the JavaScript, Node, and React ecosystem.

Automatic Code Splitting

Pages are rendered with just the libraries and JavaScript that they need, no more. Instead of generating one single JavaScript file containing all the app code, the app is broken up automatically by Next.js in several different resources.

Loading a page only loads the JavaScript necessary for that particular page.

Next.js does that by analyzing the resources imported.

If only one of your pages imports the Axios library, for example, that specific page will include the library in its bundle.

This ensures your first-page load is as fast as it can be, and only future page loads (if they will ever be triggered) will send the JavaScript needed to the client.

There is one notable exception. Frequently used imports are moved into the main JavaScript bundle if they are used in at least half of the site pages.

Prefetching

The Link component, used to link together different pages, supports a prefetch prop which automatically prefetches page resources (including code missing due to code splitting) in the background.

Dynamic Components

You can import JavaScript modules and React Components dynamically.

Static Exports

Using the next export command, Next.js allows you to export a fully static site from your app.

TypeScript Support

Next.js is written in TypeScript and as such comes with excellent TypeScript support.

"When To Use Next.JS" ----

If you have lots of content or if you expect your content to grow a lot over time, then static generated web pages are not the best solution for you. The reason is that it takes much time to build the site if you have lots of content.

When creating a very large app with thousands of pages it can be fairly slow to rebuild. And if you have to wait for a chunk of time when you hit publish before it goes live it’s not a perfect solution. So if you have a site with content that you will expect to grow and grow over time, then Next.JS is the best choice for you.

Also, if you want more freedom with how you access your data, Next.JS is worth a shout.

It's worth mentioning here that the documentation for Next is some of the best I have ever come across. It has an interactive introduction that quizzes you as you go through the content to make sure you are following along :) awesome! ??