Skip to main content

Introduction to Next.js

React is officially designated as a UI library, not a holistic framework. It provides the logic for components and state, but leaves routing, data fetching, and performance bundling entirely up to the developer to piece together via third-party packages.

Next.js is a React Framework built by Vercel. It provides a highly opinionated, production-ready structure built directly on top of React.

Why use Next.js?​

Standard React applications (like those built with Vite) execute using Client-Side Rendering (CSR). When a user navigates to your site, they download a completely blank HTML document. React then boots up in the browser and manually calculates and paints the UI using JavaScript. This produces terrible Search Engine Optimization (SEO) because web crawlers read empty pages.

Next.js fixes this by heavily implementing Server-Side Rendering (SSR).

When a user requests a page, the Next.js backend server executes the React code, creates the final HTML structure, and sends the completed HTML to the browser. Web crawlers can immediately read the text content!

Core Features​

  • File-Based Routing: Your application routes are constructed by creating folders in your code directory, completely eliminating the need for react-router-dom.
  • Full-Stack Capabilities: You can securely execute database queries directly within React components or dedicated API route files instead of spinning up a separate Node.js Express server.
  • Image Optimization: The built-in <Image /> component automatically compresses images and prevents layout shifts.