You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
6 Hrs
57 Min
16 Seg

Frameworks sobre frameworks: Next.js

25/28
Resources

What is the difference between a framework and a CLI?

In the world of web development, it is essential to understand the differences between a framework and a CLI. A CLI like Create React App makes it easy for you to do the initial work by configuring the necessary libraries, but a framework like Next.js goes a step further by integrating complete internal tools to further optimize the development process.

Why is Next.js a complete framework?

Next.js is not just a command line tool; it is a framework that uses the power of React for views and adds multiple tools already configured to enhance the development experience. Unlike Create React App, which sets up initial projects, Next.js integrates advanced functionality such as routing and server-side rendering, making it easy to develop complete applications without the need to import multiple external libraries.

How do I structure an application with Next.js?

Next.js uniquely structures your applications through the pages folder. Here, each file automatically becomes a path for your application. For example:

  • An index.js file in pages will represent the path /.
  • A about.js file in pages will represent the /about path.

In addition, you can create subfolders to better organize them and generate nested paths.

import Link from 'next/link';
const HomePage = () => ( <div> <p>This is a site to buy tickets for your favorite movies.</p> <Link href="/movies"> <a>Go buy movies</a> </Link>  </div>);
export default HomePage;

How does client-side routing work in Next.js?

In Next.js, the Link component takes care of routing without reloading the page, improving the speed and efficiency of applications. When the page is first loaded, server-side rendering is used, but once loaded, it is transformed into client-side routing, thus speeding up the user experience:

import Link from 'next/link';
const MoviePage = () => ( <div> <h2>Movies</h2> <Link href="/pay"> <a>Pay</a> </Link>  </div>);
export default MoviePage;

How do I extend my application with new pages?

To demonstrate the power of Next.js, let's add new routes to our application, such as one to display invoices for purchased tickets:

  1. Delete or rename existing files as needed.
  2. Create new files for each new desired page.
// movies.jsimport React from 'react';
const MoviesPage = () => { const movies = ['Avengers', 'Terminator']; return ( <div> <h2>Movies</h2> {/* Render each movie*/} {movies.map((movie, index) => ( <divkey={index}> <p>{movie}</p> </div> ))} </div> );};};
export default MoviesPage;

How to use dynamic information in Next.js?

To display dynamic information according to the number and type of tickets, Next.js uses useRouter to access the query URLs, allowing to customize the content display according to the provided data.

import { useRouter } from 'next/router';
const PaymentPage = () => { const router = useRouter(); const { query } = router;
 return ( <div> <p>You  bought {query.quantity} movie tickets {query.name}.</p> <Link href="/movies"> <a>Back  to us</a> </Link>  </div> );}; };
export default PaymentPage;

This approach allows developers to create more personalized and dynamic experiences, adapting to user actions throughout the application.

These are the key fundamentals for working with Next.js, from basic structure to implementing dynamic routes. It is designed to make React application development faster and more efficient, and encourages you to also explore its counterpart in the Vue ecosystem, Nuxt.js.

Contributions 20

Questions 8

Sort by:

Want to see more contributions, questions and answers from the community?

Hagan un curso de Nuxt porfa!!! En Platzi hay curso de:

Next Vs Nuxt

Next.js es un framework que usa React.js para las vistas.
Nuxt.js es un framework que usa Vue.js para las vistas.

Form.js

import React from "react";
import Link from "next/link";

export default function Form(props) {
  const [quantity, setQuantity] = React.useState(0);
  const { movie } = props;

  return (
    <form>
      <h3>{movie.name}</h3>
      <button
        type="button"
        onClick={() => setQuantity(quantity - 1)}
        disabled={quantity <= 0}
      >
        -
      </button>
      {quantity}
      <button
        type="button"
        onClick={() => setQuantity(quantity + 1)}
        disabled={quantity >= movie.available}
      >
        +
      </button>
      <Link href={{ pathname: "pay", query: { name: movie.name, quantity } }}>
        <a>Pagar</a>
      </Link>
    </form>
  );
}

movies.js

import Form from "./../components/Form";
import Link from "next/link";

const movies = [
  { name: "Avengers", available: 5, quaantity: 0 },
  { name: "Wonder Woman", available: 15, quaantity: 0 }
];

export default function MoviePage() {
  return (
    <div>
      <Link href="/">
        <a>Home</a>
      </Link>
      <h2>Peliculas</h2>
      {movies.map((movie) => (
        <Form key={movie.name} movie={movie} />
      ))}
    </div>
  );
}

Hagan un curso de Nuxt porfa!!

Platzi se ha enfocado mucho en React y ahora están sacando contenido para Angular pero casi nada para Vue
😥

Mis Apuntes

En esta clase se trabajo con el framework llamado Next.js tambien conocido como el framework completo que utiliza react para la capa de vistas.

  • En code sanbox se creo un nuevo template con next.js

  • Esperar a que se cree el template ya que ahora tambien viene un servidor ya no solo archivos estaticos.

  • Se borro la carpeta day, se creo el archivo pay.js y se renombro el archivo about.js por movies.js

  • En index.js se creo una etiqueta <p> para indicar que es un sitio para comprar boletos de peliculas.

  • En index.js se agrego el componente <link> para redireccionar a la página de movies.js

import Link from "next/link";

export default function IndexPage() {
  return (
    <div>
      <p>Este es un sitio para comprar boletos de tus películas favoritas</p>
      <Link href="movies">
        <a>Ir a comprar pelis</a>
      </Link>
    </div>
  );
}
  • En movies.js se copio el código de clases anteriores de películas.
  • Se creo la carpeta components y el archivo Form.js
  • Se copio el código del componente Form de clases anteriores al archivo Form.js
  • En movies.js se importo el componente Form
import Link from "next/link";
import { useRouter } from "next/router";

export default function PayPage() {
  const { query } = useRouter();

  return (
    <div>
      <p>
        Compraste {query.quantity} boletos de la película {query.name}
      </p>
      <Link href="movies">
        <a>Devolernos</a>
      </Link>
    </div>
  );
}
  • En pay.js se importo el componente Link
  • En Form.js se importo el componente Link
  • En movies.js importar el componente Link y crear el siguiente link
<Link href="/">
	<a>Atrás</a>
</Link>
  • En Form.js se módifica la ruta para pasar información dinámica a la página de pay.js

    <Link href={{ pathname: "pay", query: { name: movie.name, quantity } }}>
            <a>Pagar</a>
          </Link>
    
  • En pay.js se importo el useRouter de next.js

  • En pay.js se creo la constante query

const { query } = useRouter();
  • En pay.js para mostrar la cantidad de boletos y nombre de la pelicula se realiza asi:
<p>Compraste {query.quantity} 
boletos de la película {query.name}</p>

pay.js

import Link from "next/link";
import { useRouter } from "next/router";

export default function PayPage() {
  const { query } = useRouter();

  return (
    <div>
      <p>
        Compraste {query.quantity} boletos de la pelicula {query.name}
      </p>
      <Link href="movies">
        <a>Devolvernos</a>
      </Link>
    </div>
  );
}

no es un framework dentro denotro framework react es una libreria no un framework

El componente Link ya genera una etiqueta <a>, así que no es necesario poner una etiqueta <a> como hijo del componente Link.
Acá hay un ejemplo: Ejemplo

index.js

import Link from "next/link";

export default function IndexPage() {
  return (
    <div>
      <p>Este es un sitio para comprar boletos de tus peliculas favoritas</p>
      Hello World.{" "}
      <Link href="/movies">
        <a>Ir a comprar pelis</a>
      </Link>
    </div>
  );
}

que cool quedó:)

dejare mi aporte por aca. solo cree el tema para el Form ya que intente no usar styled components para crear los temas. de la misma manera el tema es local y no global. creo que a futuro voy a crearle un tema oscuro y uno claro para practicar los temas globales.
https://codesandbox.io/s/clase-movies-en-next-js-uo0v1o?file=/pages/movies.js

me saco como mil errores distintos, luego de recargar y recargar… no funciono. Pero cerré chrome, lo volví a abrir, y luego ya si me funciona sin problemas. espero que le sirva a alguien.

next vx nuxt ?

Este es mi proyecto con Nuxtjs: <https://github.com/dr1602/platzi-nuxt> Saludos.
Este es mi repo del proyecto con NextJS y Style JSX: <https://github.com/dr1602/platzi-next> Actualmente, 24 de Abril de 2024, ya no existe el template de NextJS en Sandbox, justo como lo muestra el profesor, por eso decidí hacerlo en mi entorno de desarrollo local. Este es el resultado (falta el proyecto con Nuxt): ![](https://static.platzi.com/media/user_upload/imagen-f00e4022-9056-454e-bdfd-522d2ce23ca2.jpg)

Excelente introduccion para aprender react a profundidad!! :OOOO

Hola.
Tengo el problema de que no hay forma humana de que me funciona CodeSandBox con el código de la clase.
Sigo el curso pero sin poder ver los resultados.
No sé si le ocurre a alguien más esto.
Me desanima mucho : (