A Guide to the Next JS Framework

Here's the definition of Next JS, how it compares to other frameworks, and how to build a Next.js project.

Xavi Llordella

Feb. 08, 22 · Analysis

Likes (3)

Comment

Save

5.6K Views

Next.js is a framework extensively used by TikTok, Twitch mobile, Nike, IGN, PlayStation, Marvel, and many others. It offers all the functionality we need to deploy our application in production, with a hybrid system with static pages and server-side rendered (SSR) pages. It has support for Typescript and can be deployed without having to configure anything.

SSR Benefits (Next.js)

Performance
Isomorphic: Works on both server and client (browser)
Build: Next.js in the build retrieves the necessary data and ejects HTML with React components.
Static export: Compile static files to be able to upload to the server
0 config (No need to configure anything to deploy Next, however it has a very extensible config)
Api routes
Deploy with Vercel
Next head: To modify the head part of the page to improve the SEO
Typescript support
Environment variables are used in the browser code, not just server code.
Fast Refresh: New experience of hot reloading in React components
Code splitting: loads chunk corresponding to the page path

Comparison With Gatsby

Gatsby is primarily used for building websites that generate static HTML content and web pages that have a fixed or predictable number of pages and stable content. An example might be an e-commerce site that has only 50 products available for sale.

On the other hand, Next.js can also create page content statically but adds the ability to create pages rendered to the server, both types can be combined.

An example for Next.js would be a page that has a search engine with filters that have thousands of results and combinations available.

Next.js needs a server, but Gatsby can run without one.

Next.js generates HTML/JS/CSS on runtime and Gatsby does it on buildtime.

Comparison With Express

Express is a backend framework for node.js to build APIs. It has a robust routing and http helpers (redirection, cache…). Next.js on its side also includes a routing system that can perfectly replace express.

If we are building a private page, that we can only access with credentials and that does not have to be found by the search engines, you can use Express. On the contrary, if you are looking to build a public page with SEO, you should use Next.js.

Building a Next.js Project

The first thing we must do is create our Next.js project by using create-next-app.

npx create-next-app apiumhub

Like most js projects we can access the directory created and launch the project:

bash
npm run dev
# or
yarn dev

Modifying Web Head Data

As we have mentioned, Next.js is mainly used to be able to serve a web page with SSR and therefore, to be able to modify all the indispensable requirements to be able to improve the SEO and that the search engines can index our site.

For the SEO of a page, it is very important to be able to edit the information of the <title>, the description, keywords, etc., so Next allows us to modify it in an easy way as we see below:

import Head from 'next/head'

    HTML
   
 

   <Head>
    <title>Apiumhub</title>
    <meta name="description" content="Welcome to Next.js" />
    <link rel="icon" href="/favicon.ico" />
</Head>
  

Configuring the Routes

Continuing with SEO, if we want to index different pages, we will have to create them and provide individualized meta information to each one.

To add a new route simply create a new file inside pages with the name of the route blog.js and add:

export default function Blog () {
  return <h1>This is the Apium blog</h1>
}

With this, Next.js will automatically create this page with SSR so that it can be indexed.

Navigation Between Pages

To navigate from our home page to our blog:

    HTML
   
   <a href='/blog'> Blog </a>

If we use `<a></a> we do not have a SPA (Single page application) but each page will be loaded again in our browser. To solve this and to be able to have a SPA (keeping also the SSR of the pages created), Next.js offers us the following component:

import Link from 'next/link'

    HTML
   
   <Link href="/blog">Blog</Link>

If we come from React and we want to be able to use the router we use:

import { useRouter } from 'next/router

const router = useRouter()
router.replace('/')

Initial Props in Server

With React, we are used to passing properties to our components, but now our Home and Blog pages are SSR pages, so how can we pass props to our pages?

Next.js has the getInitalProps that we have to use as we see below:

Home.getInitialProps = () => {
    return { name: 'Apiumhub' }
}

This object will be the properties that come to our page. Here we can use fetch and retrieve data from our API without any problem.

This method getInitalProps is executed in the server, when entering the route. Next.js checks if there is a getInitialProps and executes it, being able to make a fetch, therefore it can also be async and it is going to wait until it finishes to render.

Apart from that, it will also run again in the browser. Why is this?

We may think that this would not be necessary since it has been rendered on the server, but we need to have this information available so that React can hydrate our component and be able to render the same thing that has been rendered on the server.

It is necessary to remark that in the last versions of Next.js, it recommends using getStaticProps or getServerSideProps instead of getInitalProps, even though it would be very similar to what we have just seen, there is a small change that you can consult in the documentation of Next.js.

Important

getInitialProps only works on page-type components.

Curiosities

No need to import React, Next imports it automatically, so we don’t have to import it every time.

import React from 'react'

2. For Paths, Next.js also interprets directories. Earlier we added blog.js so that it knows how to locate the path, but, if we create a blog folder with an index.js inside with the content of the previous blog.js page, it will work the same as before.

3. With a React app, if we disable Javascript in the browser, and refresh, our application will not load. With Next.js, it will not only continue loading, but for example a <Link> would continue navigating since it ends up being a <a> for the browser and therefore everything is already rendered on the server.

Next.js Framework Express

Published at DZone with permission of Xavi Llordella. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

Trending