Rutas básicas

DATO:

Si usan VisualStudioCode y no les autocompletan las etiquetas hacer lo siguiente:

> 1er paso
ctrl + shif + p

> 2do paso - seleccionar lo siguiente:
change language Mode

> 3er paso - Escribir 
Javascript React

> y listo !! les autocompletara las etiquetas.

EXTENSION VSCODE para REACT

• ES7 React/Redux/GraphQL/React-Native snippets

• Simple React Snippets

Les sera de gran ayuda 😃

Les comparto un .gitignore básico;

# next.js build output
.next

# dotenv environment variables file (build for Zeit Now)
.env
.env.build

# Dependency directories
node_modules/

# Logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Optional eslint cache
.eslintcache

y uno más completo por si su proyecto escala:

Gitignore

🗺️ Routing

Rutas Estáticas: Son las que son sencillas

Rutas Dinámicas: Son aquellas que se generan de una forma consecutiva dependiendo de variables

Todo lo que esta relacionado con paginas y navegación se entiende con el nombre de routing. En Next.js ya cuenta con una solución para no preocuparnos del tema. Cuenta con dos soluciones:

Rutas Estáticas

/about/

Rutas Dinámicas

/user/platzi

Si se quiere hacer rutas dinámicas con parámetros, nombramos el archivo de esta forma:

[parametro].js

para leer el parámetro se puede usar el hook de Next.js

import { useRouter } from "next/router";

const ProductItem = () => {
  const {
    query: { productId },
  } = useRouter();
	  return <div>Esta es la pagina del producto: {productId}</div>;
};

export default ProductItem;

Los cambios que ejecutamos vienen con Hot Reload y fast refresh. Es decir que se aplican rápidamente en en el navegador.

Cada vez que creamos un archivo en pages se agregan a las rutas de la aplicación. Esta manera de hacer rutas se denomina routing basado en file system

RESUMEN: Crear rutas en Next.js es bastante sencillo debido a que usa routing basado en file system

Creo que con Next no es necesario importar react, el framework lo hace por nosotros.

Si utilizan MaterialUI acá les dejo un link que me sirvió para configurarlo.
https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Si utilizan styled components acá otro link también
https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js

En la version 13 de next el routing se puede hacer generando una carpeta(ej about) y allí un page.js con el componente.
Asi:

aqui ya tendria 2 rutas creadas /about/ y /contact/

Si están usando React 17 o posterior, ni siquiera es necesario importar React.

Con solo escribir

const Home = () => {
    return (
        <div>
            <h1>Hola Platzi</h1>
        </div>
    )
}

export default Home;

Ya tienen su componente listo y funcionando 😄

PS: Con Next debemos utilizar el export default, no funciona el export nombrado, ya que no enlaza las rutas correctamente en ese caso.

De momento se ve muy prometedor este framework para trabajar con React, ordena mucho con el tema de routing basado en el file System

Si ustedes ingresan directamente a localhost:3000/about y les aparece el error 404, pueden agregar un link para que funcione

import Link from "next/link";

const Home = () => {
  return (
    <div>
      <h2>Hello World!</h2>
      <Link href="/about">About</Link>
    </div>
  );
};

export default Home;

Emmet react
Para los que quieran integrar emmet con React

(CTRL + ,) y buscan el setting.json
Pegan lo siguiente y listo 😃

"emmet.includeLanguages": {
        "javascript": "javascriptreact"
 }

Les comparto un .gitignore básico:

# next.js build output
.next

# dotenv environment variables file (build for Zeit Now)
.env
.env.build

# Dependency directories
node_modules/

# Logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Optional eslint cache
.eslintcache

Y uno más completo por si su proyecto escala:

Ahora hay HMR, Hot Module Replacement

Personalmente recomiendo usar Prettier y ESLint para dar un formato a tu código y tener un estandar de escritura de código con tu equipo de trabajo.

Mucho dinamismo con next, no se que tan aprovechada sea esta tecnología en startups

Os recominedo chakra ui, es una mezcla de TailwindCSS y Styled-Components, vas rapido no lo siguiente…
https://v0.chakra-ui.com/

Me gusta el ruteo lo hace de forma auntomatica bueno siempre y cuando el archivo existe en el sistema y en la carpeta pages

ufff, que super poder el routing de Next

Todo lo que se conoce como páginas de navegación se refieren al routing.

Tipos de rutas en Nextjs:

Rutas Estáticas: /about/

Rutas Dinámicas: /user/jonatalvarezz /user/platzi

Creando una ruta Estática (Página básica)

1. Crear un archivo index en la carpeta pages: /platzi-nextjs/pages/index.tsx.

2. Dentro del archivo creamos el siguiente código básico:

   import React from 'react'
   
   const Home = () => {
     return (
       <div>
           <h1>Hola mundo estoy usando Nexts</h1>
       </div>
     )
   }
   //Esta es la forma de exportar un componente en Nextjs
   export default Home;
   

• Con esto nextjs toma este archivo index se tomará como el componente inicial para nuestra aplicación en next.

  

Ahora viene lo interesante de Nextjs, que pasaría si creamos otro componente en la carpeta pages

Como por ejemplo pages/about.tsx:

import React from 'react'

const about = () => {
  return (
    <div>Ruta del componente about</div>
  )
}

export default about

• Lo genial es que con crear este componente dentro de esa carpeta, Nextjs se encarga de crear una nueva ruta para este componente.

  

Esto se le conoce como routing basado en el file system: cada vez que un archivo sea creado en la carpeta pages se crea una nueva ruta en la aplicación de Next.

Si tienen problemas con el hot reloading en wsl esta solución me funcionó.

Mi ambiente de desarrollo:

• Visual studio code
• WSL Remote plugin
• WSL 2 con Kali-Linux

Pasos:

1. Desde la consola de WSL2 linux correr el servidor de next con el comando npm run dev (yo prefiero NPM a Yarn)
2. Abrir otra ventana en la consola y utilizar el comando netstat
3. Revisar cuál es la IP que está corriendo desde WSL.
   
   
   Para el ejemplo de la captura de pantalla la IP es 172.21.200.222
4. Ir al navegador y manualmente colocar la IP con el puerto por defecto en el que está corriendo next. En mi caso es el 3000. Entonces colocar en el navegador 172.21.200.222:3000

Y listo, el hot-reloading estará funcionando.

Que maravilla es NEXT.js facilita muchas cosas!

Genialidad NextJS PRESENTE

Si no les autocompletan las etiquetas pueden cambiar la extensión del archivo a .jsx

Para el auto-completado que utiliza el profesor se necesitan las siguientes extensiones

• ES7+React/Redux/GraphQL/React-Native snippets
• Simple React Snippets

si el profe jonathan hiciera su propia academia online, de una llego, enseña tan bien

Enrutando nuestra Pagina con Next.js:

/
Cada sitio web debe tener diferentes páginas, y al usar Next.js hay dos formas a través de las cuales vamos a poder crear las páginas que nuestro sitio web necesita, tenemos que usar cada una de las siguientes formas dependiendo de su propósito:
/

• Rutas básicas: Como su nombre indica, son las rutas más sencillas que puede tener un sitio web porque las definimos nosotros y no dependen de nada más, por ejemplo facebook.con/home, o instagram.con/home.
  /
  Así que para crear rutas básicas en next.js lo que debemos hacer es que dentro de la carpeta pages, tenemos que añadir un archivo, y el nombre de ese archivo debe ser el nombre que tendrá alguna ruta de nuestra web.
  /
  
  
  /
  Por ejemplo si el nombre del archivo es contact.js, entonces al buscar miWeb.con/contact, vamos a visualizar el contenido que hemos creado en el mismo archivo.
  /
  
  
  /
  Vale la pena mencionar que por defecto dentro de la carpeta pages ya existe un archivo llamado index.js (o .jsx), y ese mismo archivo representa la página principal de nuestro sitio web, por lo tanto si buscamos miWeb.con, entonces el contenido que está en el archivo index.js se renderizará en el navegador, además, no debemos cambiar el nombre del archivo index.js original, ya que si lo hacemos, no tendremos una página principal.
  /
  
  
  /
• Rutas dinámicas: Estas son un poco más complejas que las rutas básicas, debido a que no se pueden crear rutas dinámicas solo definirlas, de hecho se generan a través de los datos de los parámetros que reciben las páginas web de forma dinámica, de ahí que las Rutas Dinámicas, por ejemplo facebook.con/usuario/123, 123 no es o no debe ser definida como una ruta básica, debido a que pueden existir millones de usuarios y no debemos crear un archivo nuevo para cada usuario.
  /
  Por lo tanto, para crear rutas dinámicas, lo que tenemos que hacer es en lugar de crear archivos con un simple nombre, dentro de la carpeta pages, tenemos que crear una nueva carpeta y esa carpeta debe ser el nombre de una determinada ruta que contendrá otras rutas, a continuación dentro de la carpeta creada tenemos que añadir nuevos archivos que deben ser nombrados escribiendo corchetes, los corchetes son [], y dentro de los corchetes debemos añadir el parámetro del que depende nuestra web, por último añadir la extensión . js o .jsx, por ejemplo si creamos una carpeta llamada usuarios y dentro de esa misma carpeta añadimos un archivo llamado [id].js para que cuando busquemos miWeb.con/usuarios/123, visualicemos lo que hay en el archivo [id].js.
  /
  
  
  /

Y por último, como ejemplo, en el caso de querer obtener el parámetro pasado, dentro del archivo donde se creó la ruta dinámica, tenemos que importar por deconstrucción use router de next/router, es decir, debemos escribir el siguiente código:
/

import { useRouter } from 'next/router'

/
Luego tenemos que crear una variable que tenga como valor useRouter(), siguiendo así, mediante deconstrucción debemos obtener el parámetro puesto dentro de los corchetes de useRouter().query en este caso el parámetro podría ser id, porque digamos que la url es facebook.con/users/123 y 123 es el valor que le dimos a id, a partir de ahí, podemos hacer lo que necesitemos con el valor pasado como parámetro de la url.
/

const router = useRouter()
const { id } = router.query

devolver id
/
// devolverá 123

Rutas básicas

Existen 2 formas de hacer routing en Next.JS

• Estáticas -> ‘/about/’
• Dinámicas -> Cambian, son variables -> ‘/user/nombreUsuario/’

Next JS hace routing dependiendo de los archivos que tenemos en la carpeta ‘pages’.

archivo ‘pages/index.js’:

import React from 'react'

const Home = () => {
  return (
    <div>
      <h1>Hola Platzi desde Next JS</h1>
      <p>Esto es Hot Realoading y Fast Refresh</p>
      {/* Se actualiza muy rápido */}
    </div>
  )
}

export default Home;

Con esto ya tenemos la ruta ‘/’

archivo ‘pages/about.js’:

import React from 'react'

const About = () => {
  return (
    <div>
      <p>Esta es la página de About</p>
    </div>
  )
}

export default About;

Con esto ya tenemos la ruta ‘/about’

saben que tipografia y tema usa?

Hola que pluggin para snippets de react recomiendan, gracias.