What is Next.js
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.
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.
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.
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
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.
