LuisLlamas Logo
nextjs-introduccion-framework

Next.js from Library to Full Stack Framework

  • 5 min
  • Intermediate

Up to this point in the course, we have been working with React as it originally is: a library.

We have used Vite for bundling, react-router for navigation, zustand for state management, and axios for requests. We have had to constantly make architectural decisions and assemble loose pieces to build our application.

This is great for learning, but as the project grows, we need more structure, conventions, and good performance from the start.

Next.js is a React framework for building complete web applications, with routing, server-side rendering, resource optimization, and deployment ready from the beginning.

If React is the engine, Next.js is the complete car: it comes with the chassis, wheels, steering wheel, and navigation system built-in from the factory.

In this new section of the course, we are going to shift our mindset from a Single Page Application (SPA) to a modern Full Stack architecture.

Library vs Framework

The fundamental technical difference between using React with Vite and using Next.js is the concept of Inversion of Control.

  • Library (React): You have control. You decide where to mount the app, which router to use, and how to configure the build. Your code calls the library.
  • Framework (Next.js): The framework has control. It decides the folder structure, the routing system, and the lifecycle. The framework calls your code.

The SPA Problem (Vite)

To understand why Next.js is the standard today, we must remember how an application built with Vite works.

When a user visits your website built with Vite, the server sends them an index.html file that is practically empty, containing only a <div id="root"></div> and a <script> tag.

The browser has to download all the JavaScript, execute it, and only then does React “paint” the interface. This creates two problems:

The SPA Problem

  1. Poor SEO: Google’s robots (crawlers) sometimes see a blank page before React boots up.
  2. Waterfalls: The user sees a white screen, then a spinner, and then the content.

Next.js solves this by generating real HTML on the server. When the browser receives the response, the user already sees the content, even if JavaScript hasn’t finished loading. This process of “bringing to life” static HTML with interactivity is called Hydration.

Installation and Setup

Let’s create our first project. Next.js has its own CLI (Command Line Interface).

Open your terminal and run:

npx create-next-app@latest mi-web-next

The assistant will ask you several questions. Let’s select the most robust configuration:

ConfigurationUse?Note
TypeScript✅ YesStatic typing and better DX
ESLint✅ YesCode quality and consistency
Tailwind CSS✅ YesProject style standard
src/ directory✅ YesKeeps the project root clean
App Router✅ YesCRITICAL: modern architecture to learn
Customize import alias❌ No / ✅ YesOptional (@/components if you like)

Structure Analysis

Once installed, open the project in VS Code. You will see that familiar files like index.html or main.jsx have disappeared.

The structure of the App Router is as follows:

mi-web-next/
├── public/          # Static assets (images, favicons)
├── src/
│   └── app/         # THE HEART OF NEXT.JS
│       ├── layout.tsx
│       ├── page.tsx
│       └── globals.css
├── next.config.mjs  # Server configuration
├── package.json
└── ...
Copied!

layout.tsx

This file replaces the old index.html. It is the root component that wraps all of our application. This is where we define the <html> and <body> tags.

// src/app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
Copied!

Note the children prop. Everything we render in our pages will be injected there automatically.

page.tsx

This file represents the / route (the Home). In Next.js, only files named page.tsx (or .js) are publicly accessible. If you create a component called Boton.tsx in this folder, it won’t be a route, it will just be a component.

Initial Cleanup

The example project comes with a lot of “boilerplate” code (demo styles, Vercel logos, etc.). Let’s get it ready for work.

Delete all content from src/app/globals.css but keep the Tailwind directives (if you chose it):

@tailwind base;
@tailwind components;
@tailwind utilities;
Copied!

Clean up src/app/page.tsx to leave a basic component:

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center p-24">
      <h1 className="text-4xl font-bold">Hello Next.js</h1>
    </main>
  );
}
Copied!

Run the development server:

npm run dev

Open http://localhost:3000. If you see your title, congratulations. You now have a Next.js environment running.

Next.js uses Fast Refresh. Unlike Vite, it can preserve the state of components (like the text in an input) even when you edit the code and save.

Now that we have the environment ready, we need to learn how to navigate the application. In Next.js, we don’t define routes with react-router; the folders are the routes.

On this page