Next.js

You might say

Is there a framework for building a full React site with routing and SEO?

A React framework for building full websites and web applicationsWhen someone opens /products/42, Next.js can find that product page and fetch product data on the server before showing it. It does not automatically provide a product database or permission system.

Know first

React npm

Next

What does Next.js find for `/posts`?

app⌁ page.tsx⌄ posts⌁ page.tsx

Terminal

$ GET /
Matched app/page.tsx
✓ Home page generated

example.com/

Welcome backOpen the post list from the URL above

How a URL becomes a prepared page

The URL maps to a file: In the App Router, /posts maps to app/posts/page.tsx.

The server prepares content for the browser: The page can fetch an article list and prepare HTML on the server before sending it to the browser, reducing white-screen wait times.

Mark interactive components with 'use client': Components run on the server by default. Those requiring user interaction (onClick, useState) must have 'use client' at the top. The common 'useState only works in Client Components' error means this directive is missing.

Quick checkChoose the best answer

A React content site needs a URL per article, search-readable pages, and consistent page structure. What should Next.js own?

Install Next.js and receive an article database, login permissions, and admin workflow automaticallyMigrate the entire project to Next.js whenever one React button appearsOrganize routing, page rendering, and data loading while storage and permissions remain explicit

You can say this to an AI Agent

Use Next.js for article routes, page metadata, and data loading while reusing current React components. Do not assume automatic storage or permissions; list and verify the remaining article storage, login, and deployment work.

Learn next

1React→2TypeScript→3Tailwind CSS→4shadcn/ui→

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website