Next.js is a React framework that enables you to build seo-friendly and fast web applications using React. Next.js is widely used by the biggest and most popular companies all over the world like Netflix, Uber, Starbucks. It’s also considered as one of the fastest-growing frameworks, perfect to work where SEO is important.
Why Next Js:
To build a complete web application with React from scratch, there are many important details you need to consider:
- You might want to statically pre-render some pages for performance and SEO. You might also want to use server-side rendering or client-side rendering.
- Code has to be bundled using a bundler like webpack and transformed using a compiler like Babel.
- You need to do production optimizations such as code splitting.
Next.js, provides a solution to all of the above problems and lots of built-in features. If you want to build a complex and demanding application, react development nature of Next.js allows for saving a lot of time. Developers especially favor features like:
File-based Routing and Automatic Code-Splitting:
If you code in React, you need to utilize React switch or other comparative arrangements like react-router. Next.js works with file-system based routes. When a file is created in the pages directory, it’s automatically available as a route. The router supports nested files as well. If you create a nested folder structure, files will automatically be routed in the same way still. It also supports dynamic routes,
e.g.- pages/[id]/[slug].js → pages/1/hello-world
In above example [id] and [slug] will be dynamic values and can be accessed using router query.
Data Fetching(SSR, SSG):
Server-Side-Rendering(SSR) is important when a page requires to be pre-rendered whose data must be fetched at request time. SSR fetch data on each request and generate HTML accordingly.
Static-Site-Generation should be used if data required to render the page is available at build time ahead of a user’s request. SSG generates HTML at the build time and will be reused on each request.
Incremental Static Regeneration enables you to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.To use ISR add the revalidate prop to getStaticProps.
The Next.js Image component includes a variety of built-in performance optimizations to help you achieve good page speed. It loads images when they enter the viewport, with optional blur-up placeholders.
Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components. Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer. With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.
Next.js has built-in support for internationalized (i18n) routing since v10.0.0. You can provide a list of locales, the default locale, and domain-specific locales and Next.js will automatically handle the routing.The i18n routing support is currently meant to complement existing i18n library solutions like react-intl, react-i18next, lingui, rosetta, next-intl and others by streamlining the routes and locale parsing.
Built-in CSS Support:
Next.js gives a coordinated TypeScript experience out of the box, like an IDE. You can make a TypeScript project using create next-application utilizing the – ts, – typescript flag.