Why I Love Using Next.js

Nextjs logo

Next.js has been my saviour when it comes to building web applications for production. It has been my go to when creating a new React.js project and I haven't touched create-react-app since!

What is Next.js?

If you haven’t heard of Next.js or don’t know what it is, it is basically a React.js framework made for production due to having many cool features that make your web app have more of an edge over its competitors.

Companies like TikTok, Hulu, and Twitch use Next.js to make sure they have the best technologies possible, to provide high quality and fast web applications.

Next.js Features

  • Image Optimisation
  • Hybrid: SSG and SSR
  • API Routes

Those are just some of the great features Next.js has to offer. Let’s go through a few of them to see they are all about.

Image Optimisation

This is by far one of my favourite features of Next.js due to there being no configuration needed in order to get the optimisation set up.

Next.js version 10.0.0 implemented in the Image Component and Automatic Image Optimisation. The Image component can be used through importing ‘next/image’ into your project which is an extension of the standard HTML ‘<img>’ element.

Next.js Image Component example

This ‘<Image>’ component has handy features that include:

  • Automatic Image Optimisation which optimises the image for a much smaller file size and uses the WebP file format if the browser supports it.
  • Lazy loading is enabled by default on the Image component. Lazy loading of the images means they are only fetched from an external source for example and then rendered on to the page once the Image component is in the viewport.
  • Resizing is also great due to being responsive out of the box with no additional CSS required.

You can read more about Image Optimisation here.

Hybrid: SSG and SSR

Static Site Generation

SSG or more commonly known as Static Site Generation is one of the reasons Next.js shines. SSG is a process used to compile down a web application or website at build time so it has the HTML, CSS and JavaScript ready to go.

Instead of serving a HTML document then having to go off and individually fetch all the content, SSG makes it so the website/web app is ready to be viewed straight away and provided by a CDN.

You may be wondering how it works if you have external content required like fetching blog posts from your CMS (Content Management System).

This is where the function ‘getStaticProps’ and ‘getStaticPaths’ comes into play. These functions are used to fetch the data at build time so they are rendered into the static HTML file.

The ‘getStaticProps’ function will go off at build time to fetch all the data needed and then pass the data into the web app as ‘props’ which can then be referred to in your code.

The ‘getStaticPaths’ function is used when you need to allow for dynamic routes like a blog post. It goes off and gets all the paths needed to pre-render such as fetching the slugs of all your blog posts.

Next.js SSG using the getStaticProps and getStaticPaths functions

This image is showing ‘getStaticProps’ fetching the blog post content from Prismic.io CMS based on the slug passed into the ‘getStaticProps’ context by the ‘getStaticPaths’ function.

Server-side Rendering

SSR is used when you want to generate the HTML on each request. This method of data fetching is slower due to the content not being able to be cached and provided by a CDN.

This is used when you want to pre-render the most up-to-date data. This could be used when you are fetching data from an external API, for example, stock prices.

Next.js SSR using the getStaticProps function

You can read more about SSG and SSR here.

API Routes

Next.js enables you to quickly build new API routes because of the ‘pages/api’ folder. Anything inside this folder will be treated as an API endpoint.

For example you could create a file named ‘user.js’ which would fetch all the user data. This API endpoint URL would look something like this ‘www.domain.com/api/user’.

Let’s look at a simple API route.

Next.js API endpoint example

This API endpoint will send back a response of a HTTP status code 200, with a JSON containing a key “name” and a value “Louie Richardson”.

You can read more about API Routes here.

These are just a few of the cool features Next.js has to offer. For a full list of the features and documentation going in-depth on each one, have a look at the Next.js Documentation.

Conclusion

So is Next.js a good technology? Absolutely!

I fell in love with Next.js since my first day of using it because of how many awesome features it has out of the box. There are some really great resources out there for you to see which cover Next.js.

Here’s are a couple of my favourite content creators who cover Next.js:

These are some good places to get started as well as using the official Next.js documentation. The Learn Next.js section is amazing and it is what I used to get up to speed with Next.js and discover all of it’s features.

Join the mailing list!