What is Next.js?

Next.js is a framework for building web applications with React. It brings together in a single project what would normally require several tools: routing, server rendering, image optimization and API routes. It is maintained by Vercel.

How it works

In Next.js, pages are organized in folders. Each folder becomes a site route. A folder called about becomes the address /about.

The framework lets you choose how each page is generated. It can be assembled on the server on each visit, generated ahead of time and served ready, or assembled in the browser. This helps performance and search engine indexing.

You can also create API endpoints in the same project, which run on the server and keep secret keys away from the browser.

Structure details change between versions, so check the official documentation for the version you are using.

Practical example

You want a site with a chat that answers questions about your store. The page with the chat is the interface. An API route on the server receives the question, calls the AI model with your key and returns the answer.

$ npx create-next-app@latest minha-loja
$ cd minha-loja
$ npm run dev

With this, the project runs locally and you can already create pages and routes. The model key stays in an environment variable, never in code that goes to the browser.

What it is for

Next.js is used for institutional sites, blogs, online stores, dashboards and SaaS products. It is a common choice when you want good performance and good indexing on Google.

For people who use coding assistants, Next.js is one of the frameworks models know best, which usually leads to good results when generating code.

Difference between Next.js and React

React is a library for building interfaces. Next.js is a framework that uses React and adds routing, server rendering and other pieces. You can use React without Next.js, but not the other way around.