What is Next.js and what is it for?

Next.js is a React framework with a focus on production and efficiency created and maintained by the Vercel team, Nextjs seeks to bring together several features such as hybrid and static content rendering, TypeScript support, prefetching, routing system, feature packs, and miscellaneous plugins and examples to speed up your development providing a complete framework for you to start your project.

Next.js is an open-source framework hosted on GitHub under the MIT license. See who is using Next.js and having good growth in the market.

With all these pre-configured facilities, it assimilates to a create react app where you start the project very quickly and without worrying about webpack configurations, folder structures, routes configuration, and so on.

About Next.js:

 

Main Features of Next.js

  • Hybrid SSG and SSR: Render pages during build (Static Site Generation) or on each request (Server-side Rendering) in the same project.
  • Hot Code Reloading: Any changes made to your code during development will be reflected in the local application in real-time, updating automatically.
  • Auto-routing: The URLs in Next js are mapped based on the `pages` folder, so any file in this folder becomes a page, with no extra configuration required. (you can customize this if you need it)
  • Automatic Code Splitting: This functionality allows pages to be rendered with only the packages they need. Let’s say that if only one page on your site uses Ant Design, this package will be tied to just that page. This ensures that each page has only the code necessary for its rendering, decreasing each page’s size (kB) and improving rendering speed. There was a contribution from the Google team to improve this functionality recently.
  • TypeScript Support: Built-in automatic configuration and compilation similar to an IDE.
  • Internationalization: By default, Next.js already has a structure for identifying different languages, working with unique routes, and translations via locale.
  • Image Optimization: Native component of Next.js for optimizing your images with resizing, Lazy Load, images in modern format and easy to implement.

 

Next.js and Server Side Rendering

Next.js the great advantage of Next.js was the possibility of using server-side rendering (SSR), as this solves a problem in applications and websites built with React that mainly need SEO. In some React applications, you will find that it is not always efficient to load all the content on the client-side (client-side) which is the default for React. Currently, Next js can work in a hybrid way with SSG and SSR.

See in this video how building a page with SSR works:

 

Mini Introductory Lesson about Next.js

A great introduction to how to use Next.js made by Willian Justen, I recommend that you watch it to get a better fix and understand the concepts of Next js and when to use it.

 

How to install Next.js?

It’s very simple to start a project with Next.js, the fastest way is using:

npx create-next-app
# ou
yarn create next-app

After executing one of the commands above you will be asked to enter the name of your project and the rest will be executed automatically. Once you’ve finished the installation just go to your project folder and run npm run dev or yarn run dev to start the development environment at the address localhost:3000.

You will have a project with some examples and a Next.js structure configured. Try it. Remembering that to run the commands you need to have Node.js installed on your machine and a package manager like npm or yarn.

If you want to go deeper into more features, I recommend checking the step by step provided in the documentation.

 

Plugins and packages indication

Next.js already does a lot but always has some package that can be useful to give that up in development, I’ll indicate some that I’ve used/use and that helps me a lot:

  • next-SEO: To work with SEO, Open Graph, JSON-LD it simplifies some processes and automated global settings for SEO.
  • @next/bundle-analyzer: At some point, you may need to analyze your build to understand what depends on what and how your structure is built. Very useful for finding heavy files and modules that can affect speed.
  • next-compose-plugins: Working with various plugins inside the “module. exports” of next. config will at some point become very complex. This plugin abstracts the configuration of plugins improving visualization and organization.
  • SWR: From the same team that created Next.js this is a library that creates a hook for data fetching, in case you need to do some data fetching on the client-side.

 

Translation of terms and glossary

Build: In this case, it is the “compilation” of the site, this process makes available a folder with the files ready to integrate the official version of the site. It is usually performed after a command in the terminal like: “next build” – Next JS or “npm run build” – Create React App.

Static Site Generator (SSG): Static Site Generator, a tool that generates files for a website ready for the user to access, usually without the need to query the server.

Search Engine Optimization (SEO): Optimization of a website, structure, and content to appear in the top positions of search engines like Google.

Create React App (CRA): It is a facilitator for creating websites using the React library, allows you to start a new project in React with minimal configuration.

React: A JavaScript library for creating user interfaces.

Node.js: It is an environment for running JavaScript code on the server-side (backend)

npm/yarn: These are package managers commonly used to install new plugins/packages in your projects.

TypeScript: JavaScript superset that allows you to use static typing in JavaScript. Write in TypeScript and compile to JavaScript.

Data Fetching: Fetching data from a source, usually a server that responds through the API.

 

This article was written by Ítalo Aurélio and originally published on the Segredo website. dev.