Next.js - Why would you use it

What is Next.js?

Next.js is an open-source React framework created by Vercel that enables functionality such as server-side rendering and generating static websites for React based web applications.

How to get started with Next.js?

Just enter

npx create-next-app

in the terminal and the automatic settings will be installed.

If you are going to use typescript, write:

npx create-next-app –typescript

After complete installation start the development server by writing

npm run dev

Then the app will open on localhost. Try to edit the index.js file in your pages folder and see the results on your browser.

What are the advantages of Next.js?

Image Optimization: To be fair the image component of Next.js is not as intuitive as expected. Just wrap the image tag within a div and add the property layout=”fill” if you don’t want to set fixed width and height.

The Automatic Image Optimization allows for resizing, optimizing and serving images in modern formats like WebP when the browser supports it.

Images are lazy loaded by default. Your page won’t be penalized for images outside the viewport. Images load while they are scrolled into viewport.

Internationalization made easy: with Next.js it is easy to have a multi-language site with different routings.

They support i18n. You can define a list of locales, the languages you want, the default locale, and domain-specific locales and Next.js will handle your routing.

TypeScript Support: Next.js has automatic ts configuration and compilation.

Static Generation or server-side rendering: There are three unique functions you can use to fetch data for pre-rendering:

• getStaticProps (Static Generation): Fetch data at build time.
• getStaticPaths (Static Generation): Specify dynamic routes to pre-render pages based on data.
• getServerSideProps (Server-side Rendering): Fetch data on each request.

Fast Refresh: You will see your edits within a second, without losing component state.

Routing: You don’t have to worry about routing anymore. When a file is added to the pages folder it is automatically available as a route.

API Routes: API routes is a solution to build API with Next.js. Any file inside the folder pages/api is mapped to /api/* and will be handled as an API endpoint instead of a page. Here is an example from Vervel: https://github.com/vercel/next.js/tree/canary/examples/api-routes

Built-In CSS Support: You can add a global stylesheet on your app component which will be valid for all following pages and components. In my project I worked with TailwindCSS and it was pretty easy to setup, example for it is here: https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

You can also easily deploy your app with Vervel.

Why would you use it?

Speed: Next.js is doing automatic code splitting and only loading the Javascript and CSS that are needed for the seen page. This helps making the page much faster.

Great for SEO: Google will rank your site higher, because Next.js apps are super fast, easy to scan and provide a great user experience.