What is Next.js

Cover Image for What is Next.js
Ali Bentaleb
Ali Bentaleb

Next.js - Overview

Next.js is a JavaScript framework based on React, written in TypeScript and created by Zeit which is known today as Vercel. The initial release was on October, 2016. Using Next.js, you can create a react based app quickly with all the important details that you need to consider. Here after Next.js key features that help you build great applications with ease:

  • Code bundler using Webpack and compiler using babel all fully integrated, with Next.js 12 babel has been replaced with Rust.
- Production optimizations such as code splitting. - Static pre-render out of the box for better SEO and performance, server side rendering, and client side rendering. - Server side code to connect to your data store safely.

Next.js has all of the features above combined with the right level of abstraction, and developer-friendly

Next.js common use

Next.js is mostly used for building static generation (SSG) and server-side rendering (SSR) on a per-page basis, which means it is possible to have both SSG pages and SSR pages under the same project.

Next we will dive in and see how we can create Next.js applications using either JavaScript or Typescript.

Create Next.js app with JavaScript

To create a Next.js application with JavaScript, you need to install node.js on your machine first.

To install Node.js on your machine, download the latest version in the Nodejs download page, I recommend that you choose the LTS ( Long Term Support)version that suits your OS and install it, to learn more about LTS, check my article in this link.

Once installed, go to your folder and type in
npx create-next-app@latest myApp

cd myApp

Create Next.js app with Typescript

To create a Next.js app using Typescript, type in

npx create-next-app@latest --ts

ts stands for Typescript.

## Configure tsconfig.json in Next.js app

To configure your tsc compiler, touch a file in the root directory of your projects with the name tsconfig.json and add in your compiler options.

To change tsconfig.json file name, provide the new naming in your next.config.js for the attribute typescript.tsconfigPath like so:

module.exports = {
  typescript.tsconfigPath: 'config.json',


To learn more about module.exports, check my article in this link.

Once done, you may notice that Next.js have created a folder called .next, so what is it used for?

.next folder

.next folder is the folder where Next.js keeps the built version and it is safe to delete it when your application is not running.

Check Next.js version on your project

Checking version on a Next.js project can be done in two ways, either:

  • Using command line, type npx next --version.
  • Or, open package.json and check the version written next to next.

Next.js pros

Next.js has plenty of cool features that make development fun; here are the top features to use Next.js:

  • An intuitive page-based routing system (with support for dynamic routes)

  • Automatic code splitting for fast page load and better SEO.

  • Client-side routing with optimized prefetching using Next/Link

  • Support for any CSS-in-JS library, like tailwindcss, to configure it check my article section configure tailwindcss with Next.js in this link

- Development environment with Fast Refresh support

Next.js cons

Next.js cons are:

  • State manager Lack: no state manager is given by default, so you need to use your own state manager like Redux if needed.

  • Pages has to be either dynamic or static, you cannot combine both modes in a single page.

  • Integrations with some framework can be cumbersome and you need to figure it yourself how to do it.

  • Documentation is not fully detailed for using advanced options in the Framework.

Next.js examples

Though these cons, Next.js stays the best Framework to use for faster website building especially if you are already familiar with React, to start right away using Next.js projects, I recommend to check these sample projects

  • Next.js project with charts using nivo, check my article in details in this link.
  • Next.js project with React Suspense, check my article in this link.
3 easy steps to use xstate vis...Next.js 12.0.1 release