Cursos Empresas Blog Live Conf Precios

Creando nuestra primera página

Clase 3 de 23 • Curso de Next.js 2018

Clase anteriorSiguiente clase

Resumen

Vamos a crear nuestra primera página en Next.js, más que nada para tener una muy buena idea de cómo funciona el router de Next, cómo crear un pequeño componente en React, y sobre todo cómo hacer para crear un buen entorno de desarrollo en un proyecto de Node.
Esto no es solamente para Next, puede aplicar para cualquier proyecto que hagamos en Javascript.

Eddy Arellanes

student•

Curso de Unit Testing de Platzi spoiler alert?

Fernando Ontiveros

student•

Ojala !

Jesús Mur Fontanals

student•

Si! un curso de Unit Testing para React con Jest por favor!!

Luis Daniel Becerra Avellaneda

student•

mkdir podcast
cd podcast
npm init -y
npm add next react react-dom

O si prefieres utilizar yarn

yarn init -y
yarn add next react react-dom

Sergio Toshio Minei

student•

Iniciar un proyecto con Next

Instalar las dependencias:

$ npm add next react react-dom

Scripts indispensables

dev: entorno de desarrollo.
build y start: entorno de producción

Dentro del package.json, se debe agregar:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Ruteo

Next busca automáticamente todas las páginas en la carpeta pages.

El router lo que busca es el mismo nombre del la ruta (path) que tenemos en la carpeta /pages.

Ejemplo:
GET/
Muestra el archivo en: /pages/index.js
GET/platzi
Muestra el archivo en: /pages/platzi.js

En React, cada componente debe de retornar un solo objeto de HTML.

Ejemplo de un componente:

export default class extends React.Component {
  render() {
    return (
      <div>
        <h1>Hola Mundo!</h1>
        <p>Bienvenido al curso de Nect.js</p>
      </div>
    )
  }
}

Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.

Ivan Robles

student•

Excelente trabajo MineiToshio!! 😃

Sergio Toshio Minei

student•

Muchas gracias @elSharmaz

Edwin García

student•

Usando un componente funcional y Fragment en lugar de div para no enviar cosas de más al navegador se vería así:

import { Fragment } from 'react'

export default () => (
    <Fragment>
        <h1>¡Hola mundo!</h1>
        <p>Bienvenidos al curso de Next.js</p>
    </Fragment>
)

Por lo que veo no es necesario importar React y ReactDOM, pero si es necesario hacerlo con Fragment.

Alejandro Robleto

student•

muy buena gracias por recordalo edwin

Juan Otavalo

student•

A mi si me toco importar por que me mandaba error.

Juan Rodrigo de la Cruz García García Briseño

student•

qué diferencia hay entre npm add y npm install?

Daniel Vaca

student•

npm add es un 'alias' de nom install.

Daniel Vaca

student•

npm add es un alias de npm install

Miguel Angel Morales Larriega

student•

//Con un sfc podría haber hecho menos código:

const Index = () => ( <h1>¡Hola Platzi!</h1> ); export default Index;

Juan González

student•

export default Index = () => <h1>¡Hola Platzi!</h1>

José Antonio aparicio gallego

student•

Usas la clase de React.Component sin importarla, me puedes explicar como puede funcionar eso que tu haces por que normalmente no funciona así,

tendrías que poner al principio, pero yo no veo por ningún sitio eso una respuesta seria apropiada. Gracias

import React, { PureComponent } from "react"

Cristhian García

student•

Creo que se debe a que Nextjs lo hace por nosotros

Eduardo Peredo Rivero

student•

Si como yo les gusta usar una carpeta src y mantener todo su código ahi pueden pasarle el root directory a next:

"scripts": {
    "dev": "next ./src"
}

De esta manera pueden tener su carpeta pages dentro de src. Obviamente funciona con cualquier ruta no solo con src.

Miguel Angel Morales Larriega

student•

Al ejecutar solo "npm-init" te trae cada valor del objeto del paquete y te hace una serie de preguntas para poder definir cada uno de ellos.

En cambio al agregarle "-y" te trae por default los valores.

Andrés Felipe Castellanos

student•

Con el curso de React, es mejor usar <Fragment> en lugar de div, esto con el fin de que no se sature la pagina con muchos contenedores.

<<Fragment>
        <h1>¡Hola Platzi!</h1>
        <p>Bienvenidos todos al curso de Next.js</p>
      </Fragment>>

Rubén Darío Perez

company_admin•

Para abreviar también se puede escribir de la siguiente manera.

<> 
<h1>Soy un Título</h1>
<p>Soy la descripción</p>
</>

Sergio Toshio Minei

student•

La mascota de Github del fondo del video está tomando PlatziCola! 😮

Juan Reyes

student•

30 a 40 Millones de años xD

Daniela Gonzales

student•

cual es la diferencia de crear un web con next y sin next?

Diego Forero

Team Platzi•

Next ofrece features adicionales como server side render directamente, si no usas next tienes que hacer todo el server side render tu, eso es que tu pagina cargue de inmediato una versión estática mientras carga todos los datos y tu app de react, con esto el usuario siente que el sitio es más fluido y rápido.

Miguel Angel Morales Larriega

student•

La diferencia es SSR Hacerlo sin next js implica que tu aplicación es un CSR (Client Side Render) osea una aplicacion que corre del lado del cliente. Ahora si tu aplicación es abierta en otro tipo de comoputador o celular que no tiene la misma capacidad que una actual, genera que tu aplicacion se demore en el tiempo de carga y sea solo óptimo en computadores actuales. Pero al utilizar SSR (Server Side Render) tu aplicación correrá del lado del servidor y no tendras problema en el tiempo de carga y obviamente se podra ver en cualquier tipo de dispositivo, pero ojo quizas me diras que el servidor será mas lento, pero no es así, ya que un sevidor es mucho más rapido y más optimo que una computadora.

Espero haberte aclarado las dudas.

Jose Daniel Atencio Manzanillo

student•

tengo una pregunta y disculpen mi novatada... porque funciona index.js si no estoy importando react ??

Carlos Sampol

Team Platzi•

Todo archivo .js se convertiste en una ruta, es procesado y renderizado. Next se encarga de hacer el import necesario :)

Santiago Marcano

student•

Es importante resaltar que el archivo debe estar ubicado en la carpeta pages para que Next lo lea como una ruta

Alejandro Zapata Molina

student•

Interesante!!! Es hermoso que no se tengan que definir las rutas manualmente <3

Carlos Rivas

student•

¿No es mejor usar un “fragment” en vez de un “div”?

Leandro Videla

student•

Claro! Sería algo así:

class Hola extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h1>Hola Platzi</h1>
        <p>Bienvenidos al curso de next js</p>
      </React.Fragment>
    );
  }
}

export default Hola;

Martin Lazzeri

student•

pensaba lo mismo

Carlos Sánchez

student•

si usamos nextjs, no necesitamos webpack?

Seba Cardoso

student•

No necesitamos instalar webpack porque next lo usa por abajo. En el archivo next.config.js podemos configurar las opciones de webpack

Juan David Martinez Mona

student•

Hola a todos, tengo el siguiente error:

/home/david/Desktop/workBench/JavaScript/Next/podcast/node_modules/p-limit/index.js:29 } catch {} ^

SyntaxError: Unexpected token { at createScript (vm.js:80:10) at Object.runInThisContext (vm.js:139:10) at Module._compile (module.js:616:28) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Module.require (module.js:596:17) at require (internal/module.js:11:18) at Object.<anonymous> (/home/david/Desktop/workBench/JavaScript/Next/podcast/node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/index.js:1:336) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! podcast@1.0.0 dev: next npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the podcast@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

presumo que tiene que ver con la version, pero no encuentro el problema, ¿alguien mas ha tenido este inconveniente?

Johan Stivens Suarez Galindo

student•

Estoy usando la versión de NEXTJS 9.4.0, pero el profesor usa la 6.0.3, creen que haya algún problema o podré trabajar sin problemas?

Erik Elyager

student•

Estás varias versiones adelante, muy probablemente muchas cosas han cambiado, has la prueba. Te recomiendo el curso, yo lo tomé hace ya algún tiempo y el proyecto es buenísimo sería genial que pudieras actualizar el proyecto a la última versión.

Pablo Orozco Monte

student•

Los desarrolladores de Next Js continúan creando nuevos features en cada versión pero siguen soportando las anteriores. Algo que cambia puede ser que la carpeta /static en Next Js 9.4 es /public

Kevin Humberto León Santamaria

student•

No me corre el entorno de desarrollo, ya intente borrando la carpeta node_modules y el archivo package-lock.json, luego borre el cache y ejecute npm install y no solucione nada, espero su pronta ayuda, estuve buscando la solucion en varias paginas y nada.

➜ podcasts node:(v13.0.1) npm run dev  

> podcasts@1.0.0 dev /mnt/k/{ Programación }/next_js/podcasts
> index.js

sh: 1: index.js: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! podcasts@1.0.0 dev: `index.js`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the podcasts@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kehu/.npm/_logs/2019-12-10T01_44_54_679Z-debug.log

Gabriel De Andrade

student•

Hola! Parece que en la pages del proyecto no está declarado un index.js, asegurate de que si exista un archivo index.js dentro de pages y asegurate de estar en la carpeta correcta :D

Kevin Humberto León Santamaria

student•

Gracias por responder, compañero. Esa posibilidad ya la descarte, esta todo correcto, por lo que no entiendo qué pasa.