Next.js is an amazing choice in 2020 if you want to build fast, speedy, and server-side rendered websites that feel fast as well as are truly dynamic in nature too. In this post, we'll take a look at 5 Next.js production level tips and checklists you should keep in mind to have the best experience with Next.js on production.

Optimize SEO

If you're doing anything moderately serious with Next.js, I would say do not neglect SEO. Next.js is a great tool that takes care of so much for you, and SEO is that one little thing that can really help you get free traffic and put you on the map.

You have two options to add SEO to Next.js apps.

Next.js boost SEO #1

Use the following meta tags on every Next.js page with custom values:

import Head from 'next/head'

// at the end of your render function
<Head>
	<title>Your page title</title>
	<meta name="description" content="<page description>" />

	<meta name="image" content="<page cover image>" />

	<meta itemProp="name" content="codedamn" />
	<meta itemProp="description" content="<page description>" />
	<meta itemProp="image" content="<your page cover>" />

	<meta property="twitter:card" content="summary" />
	<meta property="twitter:title" content="<page title>" />
	<meta property="twitter:description" content="<page description>" />
	<meta property="twitter:site" content="<your twitter handle>" />
	<meta property="twitter:creator" content="<your twitter handle>" />
	<meta property="twitter:image:src" content="<your page cover>" />

	<meta property="og:title" content="<page title>" />
	<meta property="og:description" content="<page description>" />
	<meta property="og:image" content="<your page cover>" />
	<meta property="og:url" content="<your url>" />
	<meta property="og:site_name" content="codedamn" />
	<meta property="fb:admins" content="<fb admin id>" />
	<meta property="fb:app_id" content="<fb app id>" />
	<meta property="og:type" content="website" />
</Head>

These are some common meta tags important for handling social media shares and SEO tags.

Next.js boost SEO #2

Thankfully, with Next.js, we also have another solution using the next-seo plugin. This plugin would allow you to automatically take care of HTML tags and correct attributes, you just have to fill relevant data.

Here's an example for Next.js SEO plugin usage:

import { NextSeo } from 'next-seo'
 
export default function MyPage() {
  return <>
    <NextSeo
      title="Simple Usage Example"
      description="A short description goes here."
    />
    <p>Simple Usage</p>
  </>
}

There are many more attributes you can customize and add. Learn more about it here: Next SEO plugin

Revalidate Dynamic Pages

Next.js allows you to revalidate your dynamic pages from time to time. What does that mean? This is an amazing feature that actually allows you to revalidate, i.e. recreate the pages again after a certain interval.

This enables the ability to have dynamically changing pages whilst serving static HTML on the backend. It's a win-win for both server and client. The client gets a pre-rendered HTML file instantaneously. The server doesn't have to compute the real page on every request, just once in a set interval.

Check this example out: https://reactions-demo.now.sh/

If you inspect the page's source code, you'll see that you actually have static HTML data being returned from the server. The revalidate parameter has been set to 1 second, this means:

Each Next.js page can define the timeout. For the above page, it’s set at 1 second.
When a new request comes in, the statically generated page is served directly from the file system as if you were serving a simple static page.
Later, when another request comes in after the defined timeout is exceeded: (1) The statically generated page is served, and (2) Next.js generates a new version of the page in the background and updates the static page for *future* requests.
When another request comes in after the regeneration is done: The updated static page is served to that request and to all subsequent requests from that point.
In case the regeneration fails for some reason (failed API call), Next.js keeps serving the last good page available so you don't get any downtime because of some bad backend server.
This allows Incremental Static Regeneration on a per-page basis without rebuilding the full app. It’ll always be fast because users will always get a static response.

So, the important thing here is to add revalidate parameter to your Next.js pages which are dynamic in nature. This would help your website stay updated without rebuilding the whole app every time there's an update.

Use TypeScript with Next.js

TypeScript is very convenient and easy to set up with Next.js. All you have to do to convert your Next.js project from JavaScript to TypeScript is the following.

Rename all .jsx files to .tsx (if component) and .js files to .ts (if API/regular files)
Run the following command in your terminal:

# npm
npm i typescript @types/node @types/react --save-dev
# or yarn
yarn add typescript @types/node @types/react --dev

Run your project again using yarn dev or npm run dev. This would create a new file called tsconfig.json and populate it with the best settings.
You might need to restart your editor's typescript engine for it to pickup the new tsconfig.json file. The easiest way is to restart the editor itself.

Optimize Fonts and Images

Next.js is a great framework for your code. But what about your static assets? They play an equally important part in delivering the best experience to the user. A super-fast website is of little use with a 5MB image loading and slowing the whole experience.

Again, there are multiple ways to address this, let's start with what is going to be possible in the near future.

Opt-in for experimental optimization support

Next.js 9.5.2 includes experimental support just for this out of the box! This means that you can optimize your fonts and images without spending any time on configuration, let Next.js handle it for you.

We all use Google fonts, very convenient to grab a link and throw it inside the header and use it in CSS like magic. But the truth is that the font loading is just one more roundtrip to Google's server, which means your website would have to make an external request, slowing things down. Here's the merged PR for it.

To enable both of these, use at least 9.5.2 and add/merge the following to next.config.js file:

module.exports = {
  experimental: {
    optimizeFonts: true,
    optimizeImages: true
  }
}

This will make sure you have fonts inlined for best performance and your images are optimized.

Use tinypng

If for some reason you want to manually optimize images, tinypng is a great solution and I personally use it myself a lot of times. Their free tier is very generous and you would probably never need to pay them for light to moderate usage.

Here's the link for tinypng: tinypng.com

Deploy on Vercel

Unless you have a strong reason to deploy it manually, I would almost always recommend deploying it on Vercel, and 100% always if it is your personal project.

Their Hobby plan is super generous, and with their CDN/Edge infrastructure, you get your website delivered to clients blazingly fast. This website, codedamn, is also hosted on Vercel, and I hope you're having a great experience browsing and reading things here.

Here are steps to deploy your website on vercel:

Signup for a free account on vercel.com
Write the following in your terminal: npm i vercel -g
In your terminal, write vc login
Enter your email address, and confirm the email vercel sent you
In the root of your Next.js project, write vc
Wait for the project to build and upload. DONE! You'll shortly get a domain pointing to your project deployed on vercel edge network.

Vercel has been a treat to work with here at codedamn, and I would highly recommend anyone looking to deploy their Next.js projects to use vercel, because hey, Vercel literally created Next.js, so they would understand their technology better than anyone else.

Conclusion

I hope this blog post helped you learn more about Next.js best practices and how to work with them. If you're ready to supercharge your Next.js skills, check out the Next.js mastery learning path on codedamn consisting of sweet Next.js practices and things to do to have a great understanding of the framework.

Next.js production tips and checklist

React 17 is released - What's New in React?

8/11/2020

Read More

codedamn shifted to Next.js - Case Study

8/4/2020

Read More

10 New JavaScript Features in ES2020 That You Should Know

7/25/2020

Read More

Mythbusting Competitive Programming – You Don't Need to Learn It

7/25/2020

Read More