Cómo implementar Next.js

Clase 20 de 22 • Curso de Server Side Render con Express

Beto Martinez

student•

Entonces, ¿Nos ahorramos todo lo que hicimos en el curso con tal solo esto? ._.XD

Cristofher Jumbo Jimenez

student•

HAHAHAHAH si bro, me quede como el pikachu hahahah

Wandy Rafael Santana Evangelista

student•

Hola Devs: Aqui les traigo un articulo que explica y habla muy bien se NextJS, pueden darle una mirada y aprender mucho mas de esta pontencial herramienta: Click Aqui

Jesús Manuel Mejía Rojas

student•

Solo aclaro bendito sea el que hizo next, quiero su level <3

Nicolas Esteban Manograsso

student•

A mi mente solo vinieron dos cosas, que tengo que tomar el curso de NextJS y me quede un rato con la cara de sad Harold después de todas las configuraciones que hicimos

Jose Daniel Molina

student•

Pues con un vistazo se ve increíble todo lo que se podría hacer con Next.js. Todo lo que hemos aprendido de Server Side Render lo podemos resumir con Next. Genial

Ricardo Oriel Cuan Sánchez

student•

se ve el potencial de Next.JS

Juan Carlos Pinzón

student•

Se podría decir entonces que next nos ahorraría la gran mayoría de trabajo que se ha hecho en las clases anteriores?

Carlos Arboleda

student•

Si y No. Next si facilita varias configuraciones para SSR dependiedo el tipo de Data Fetching que utilices, sin embargo, varias de las clases que se vieron durante este curso se enfocan en optimización de carga. Por otro lado, en esta clase el profe solo esta haciendo una demostracion de SSR con un 'Hola Next', si se desea migrar todo el proyecto PlatziVideo, se requieren mas refactoring (Especialmente para Redux y evitar doble renderizado). Un artículo muy recomendado es Rendering on the Web

Angel Archbold

student•

No entendí, con Next js se hace la configuración de las clases anteriores? Como un framework?

Les agradezco la explicación

Enrique Moreno

student•

Bueno no se si la misma configuración anterior, pero si el mismo concepto y tal como dice el profesor de manera más eficiente.

Cesar Fonseca

student•

Me quiero medio morir, parece que esta herramienta esta de lo mejor, pero bueno, calma

Carlos Enrique Ramírez Flores

student•

creamos el path de nextjs

ejecutamos npm init para crear el package json

instalamos dependencias

npm i react react-dom next

agregamos los comandos

{
  "name": "nextjs",
  "version": "1.0.0",
  "description": "Next js en clase",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^9.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

creamos el path de pages y agregamos index.js

import React from 'react';

const Landing = () => {
  return (
    <div>
      Hola Next Js
    </div>
  );
};

export default Landing;

corremos el comando:

npm run next

Diego Francisco Luna Lopez

student•

Al poner el comando:

npm install next

npx create-next-app

Pero me sale el error:

npm ERR! Unexpected end of JSON input while parsing near '...WagAAANcP+wRMi12/IWFI'

Algien sabe que esta pasando

Erika Luna

teacher•

Actualiza npm en tu máquina

sudo npm i -g npm

Si no funciona como se esperaba, utiliza

npm cache clean --force

Diego Francisco Luna Lopez

student•

Gracias erikaluna, me funciono 🤟

Naldo Duran

student•

✌

José María Cuevas Ramírez

student•

¡🤯! . Para cuando la actualización del curso de Next.js, se ve increíble esta herramienta

Edinson Salas

student•

Ya salió

Cristian Iñiguez

student•

Que es lo que usa el profe para que los comandos de npm install se autocompleten

Roger Carlos Ariel Alba

student•

Hola,

usualmente tab ¿no te funciona así?

Cristian Iñiguez

student•

yo me refería para que se muestre la sugerencia que le aparece al profe

Maria Elizabeth Minero Alvarenga

student•

Gracias.

Cesar Fonseca

student•

Bueno, al menos terminamos el curso y se sabe que hay una herramientas mas al nivel "no tan pro"

{
  "name": "nextjs",
  "version": "1.0.0",
  "description": "Next js en clase",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^9.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

Cómo implementar Next.js

Conocimientos necesarios para aplicar SSR

Lo que aprenderás sobre server side render

Presentación del proyecto del curso y sus herramientas

¿Qué es Server Side Rendering?

Preparando entorno para aplicar SSR

Actualizando dependencias en NPM

Creación del servidor en Express

Usando Nodemon y Dotenv

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Abstrayendo React Router, creando history y haciendo initialState más accesible

Aplicar Server Side Rendering

Definición de la función principal para realizar el renderizado desde el servidor

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando webpack para producción

Optimización del Build

Aplicar hashes al nombre de nuestros builds

Buenas prácticas de Server Side Render

Vendorfiles en Webpack: definiendo cacheGroups

Vendorfiles en Webpack: generando el vendorfile

Configuración de ESLint

Alternativas al SSR con Express

Cómo implementar Next.js

Cómo usar Gatsby.js

Cuando usar cada una de las herramientas presentadas