What is Next.js?

What Next.js is

Next.js is a React framework made by Vercel for building websites and web apps. It handles routing, server rendering, static pages, and API routes in one project. Pages can be rendered on the server, so they load fast and search engines can read the full content. That makes it a strong choice for business sites that need to rank on Google.

Next.js was created by Guillermo Rauch and his team at a company called ZEIT, and it was first released as open source in 2016. The goal was to make React apps render on the server without a lot of manual setup. ZEIT later changed its name to Vercel in 2020.

Over the years the framework added static site generation, API routes, image optimization, and incremental static regeneration. Version 13, released in 2022, introduced the App Router, which is built on React Server Components. The App Router became the recommended way to build new projects in 2023, while the older Pages Router is still supported.

How Next.js works

React on its own only knows how to draw an interface. Next.js adds the rest of what a website needs: routing, data loading, a build step, and a server. You write React components, and Next.js decides how and where to run them.

Routing is based on files. In the App Router, each folder inside the app folder becomes a part of the URL, and a file named page inside that folder becomes the page people see. A file named layout wraps pages with shared parts such as a header and footer.

Next.js can prepare a page in different ways. Static rendering builds the HTML once, ahead of time. Server rendering builds the HTML on each request. Client components then add interactivity in the browser, a step called hydration. Server Components run only on the server, so their code is not sent to the visitor.

Key features of Next.js

• File based routing

  Folders and files define the URLs of the site. There is no separate route configuration to maintain.

• Server and static rendering

  Each page can be built ahead of time, rendered on request, or refreshed on a schedule. You can mix these in one project.

• React Server Components

  Components can fetch data and render on the server. This reduces the amount of JavaScript sent to the browser.

• Built in optimizations

  The image, font, and script components handle resizing, lazy loading, and font loading for you.

• Route Handlers

  You can write API endpoints in the same project as the pages. This is enough for many forms, webhooks, and small backends.

• Metadata and SEO tools

  Titles, descriptions, social preview images, sitemaps, and robots files can be defined in code next to each page.

When to use Next.js

Next.js compared with alternatives

How to start learning Next.js

1. 01Learn the basics of HTML, CSS, and JavaScript first, then the basics of React components, props, and state.
2. 02Follow the official Learn course at nextjs.org/learn, which builds a small dashboard app step by step.
3. 03Create a project on your own computer by running npx create-next-app@latest and choosing the default options.
4. 04Build a small site with a home page, an about page, and a blog list to practice routing, layouts, and data fetching.
5. 05Deploy it to a host that supports Next.js and share the link, so you see the full path from code to a live site.

What Next.js costs

Next.js is free and open source under the MIT license. You do not pay to use it, including for commercial projects. Hosting is a separate cost that depends on the provider you choose, and you can also host it yourself on any server that runs Node.js.

How DATAL Projects uses Next.js

Next.js is part of our web development work in the Philippines. Common uses:

• Company websites and landing pages
• Dashboards and client portals
• Online stores and booking systems

Common questions about Next.js