Getting started with NextJS - A Brief Introductory Guide

Introduction

React is without a doubt the most widely used JavaScript library for developing single-page applications (SPA). Working with it provides an excellent developer experience because applications can be broken down into components, allowing for reusability.

However, because React is a library, some features are not included, and they are installed separately in order to utilize them during application development. One such feature is routing, which is implemented using the react-router package.

Secondly, in React, all content is rendered on the client-side, which slows down the loading of a page's content before it is visible to the user. Nextjs, being a React meta-framework, addresses some of these issues. This post will provide you with an overview of Nextjs and its main features.

What is Nextjs

Nextjs is a React framework created by Vercel. It builds upon React to provide extra functionalities that come in handy, especially during development. Handling both the client and server sides of your program, automatic page routing, static site generation, and more are examples of such features. All of this contributes to and improves the developer's overall experience.

This framework is best suited for building websites or landing pages due to its Search Engine Optimization (SEO) and Server Side Rendering (SSR) features, and as such, it is less suited for building secure web applications that require user authentication.

How to Install Nextjs

To install a Nextjs application, It can be done using the npm package manager by running the following command in the terminal.

npx create-next-app my-next-app

The create-next-app is a package similar to the create-react-app with all the necessary Next dependencies installed.

To start the development server of the Next App, run;

npm run dev

You should see something similar to the image below after the dev server is up and running.

Key Features of NextJS

The following is a list of some handy features provided by NextJS, which you will most likely encounter while developing an application:

Automatic Routing
Server-Side Rendering(SSR)
Search Engine Optimization(SEO)
Image optimization
Typescript support

Automatic Routing

With NextJS, you do not need to install a special library to handle routing. Unlike React, it comes with a built-in router right out of the box. Here, pages for an application are created in the pages directory and, for the purpose of switching between these pages, a component called Link is used from next/link. Below is a sample snippet of how a Link can be used;

import Link from "next/link"

const Main = () => {
  return (
      <div>
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
        <Link href="/contact">Contact</Link>
    </div>
  );
};
export default Main

Server-Side Rendering (SSR)

Rendering applications on the client comes with some issues due to the fact that a bunch of activities take place behind the scenes, which contributes to the slow initial loading.

But with a technique like SSR, your application's Javascript loads on your server and not on your client, which gives you the benefit of an indexable and crawlable website.

In Next, your server-side rendering is handled by default, and a static HTML file that can be read by search engines is created on every request.

Search Engine Optimization (SEO)

Applications rendered on the client-side are ranked poorly, which results in poor SEO. This is because all of the page's content is produced by JavaScript.

With the Next SSR technique, SEO is improved since the application JavaScript does not need to be executed to see the page contents during crawling by search engines.

Next provides a Head component from next/head that makes it easier to add meta data such as the title and meta description to a page's head.

import Head from "next/head";

const About = () => {
  return (
    <div>
      <Head>
        <title>About Us</title>
        <meta name="description" content="Welcome to our about page"/>
      </Head>
    </div>
  );
};
export default About;

Image Optimization

When it comes to building web applications, optimizing images is very important towards improving site speed and also user experience.

NextJS also provides an automatic image optimization component called Image from next/image which helps images load pretty quickly;

import Image from 'next/image';

const MyImage = () => {
    return (
        <div>
            <Image src = "image.png" alt="This is an image description" />
        </div>
    )
}
export default MyImage

Typescript support

Typescript is supported out of the box by NextJS. It is as simple as generating an empty ts.config.json file in your existing application's root directory, and NextJS will configure it for you;

touch tsconfig.json

Conclusion

Nextjs is an awesome framework that builds on React. It allows for a more fully-featured version of React and takes away the hassle of handling some tasks, right out of the box for you. But, you'll still need to have basic knowledge of React to work effectively with Nextjs.

This article introduces you to the basics of what Nextjs is. You’ve learned about some of its key features and how to set it up. To further deepen your knowledge of Nextjs, you can visit the official
documentation.