Why use Next.js?

React and Next.js are related, but they serve different roles.

Example: a React application

With a typical client-rendered React application, you might need to configure:

• A routing library.
• A data-fetching strategy.
• Server rendering, if needed.
• SEO metadata handling.
• A backend service.
• Build and deployment settings.

Example: a Next.js application

Next.js supplies conventions for these concerns, allowing you to focus more on your application’s features.

tsx

// app/products/page.tsx
export default async function ProductsPage() {
  const response = await fetch(
    "https://api.example.com/products"
  );
  if (!response.ok) {
    throw new Error("Failed to load products");
  }
  const products = await response.json();
  return (
    <main>
      <h1>Products</h1>
      <ul>
        {products.map(
          (product: { id: string; name: string }) => (
            <li key={product.id}>{product.name}</li>
          )
        )}
      </ul>
    </main>
  );
}

This illustrates fetching data in a Server Component. In a real project, you would also define the response type, decide on caching and revalidation behavior, and handle loading and failure states.

Note that the example URL is a placeholder, not a working API.

Important: You can use React without Next.js. A Next.js application uses React.