Aplicación de podcast integrada con la API de AudioBoom para aprender Next.js

• npm install Para instalar las dependencias.
• npm run dev Para iniciar la aplicación en un entorno de desarrollo.
• npm run build && npm start Para iniciar la aplicación en un entorno productivo.

Ver aplicación Podcast-app

Next.js es un framework para construir aplicaciones web modernas en React. Una de sus principales características es que esta pensado para tener una excelente experiencia como desarrollador.

Instalación inicial de las dependencias:

npm add next react react-dom

"npm add es un alias de npm install --save"

dev: Entorno de desarrollo
build y start: Entorno de producción

Al archivo package.json agregamos:

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

Next busca automaticamente todas las paginas en la carpeta pages de nuestro árbol de directorios del proyecto.

El router busca el mismo nombre de la ruta (path) que tenemos en carpeta /pages

GET
Muesta el archivo en /pages/index.js

GET/Ejemplo
Muestra el archivo en Pages/Ejemplo.js

Cada página regresa un componente de React.js, ejemplo:
index.js

export default HolaMundo extends React.Component {
    render(){
        return 
        (
            <div>
                <h1> Hola Mundo! </h1>
                <p> Bienvenidos a Next.js</p>
            </div>
        )
    }
}

Style JSX: Sistema de estilos utilizado por Next.js. Este resuelve problemas típicos de CSS en React.js

• Es mas acorde a React.
• Evitamos problemas de escalamiento en la aplicación.

<style jsx>{` 
    .clase {
      color: red;
    }
`}</style>

Solo aplica al componente en el cual estamos redactando los estilos, no se aplica a componentes externos o internos.

Para romper estas reglas existe el atributo global con el cual se pueden manupular los estilos de otros componentes ya sean externos o internos.

**Ejemplo #1: ** En este ejemplo el body de toda la aplicación se va a colorear de rojo

<style jsx global>{`
  body {background: red}
`}<style>

**Ejemplo #2: ** En este ejemplo todas las etiquedas p que esten contenidas en el div del componente se van a colorear de rojo.

<style jsx>{`
  div :global(p){background: red}
`}<style>

Next.js rutea atuomaticamente los archivos que se encuentren en la carpeta /static

Con el Client Side Rendering, el usuario debe de esperar un tiempo significativo para poder ver la aplicación. Esto se debe a que primero debe de descargar todo el JS y luego esperar a que cargue para poder visualizar algo.

Con el Server Side Rendering, el servidor ya envía una HTML con CSS y, por ende, el usuario tiene que esperar mucho menos para tener una primera vista de la aplicación.

• Mejor Performance.
• Indexa en todos los servicios.

La función getInitialProps nos permite cargar el contenido principal de la página cuando tenemos que recurrir a una API.

static async getInicialProps() {
  //aquí traemos los datos
  let request = await fetch('url')
  let datos = await request.json()
  return { datos }
}

Luego de cargar los datos, los agrega a las props del componente de React.

• Solo funciona en pages
• Pertenece a Next.js, por ende no funcionara con otra libreria o framwork.

Al trabajar con Server Side Rendering ciertos métodos dejan de funcionar ya que estos se ejecutaban en el navegador pero con SSR su ejecución debera ser desde el server.

Para resolver esta problematica se recomienta la libreria isomorphic-fetch

npm add isomorphic-fetch

Lo importamos en nuestra aplicación

import 'isomorphic-fetch'

Next.js posee el componente <Link /> que nos permite "navegar" entre las pages de nuestra app; debe tener a una etiqueda <a /> como hijo para que funcione.

import Link from 'next/link'

<Link href="/myPage">
    <a>
        ...
    </a>
</Link>

NOTA: El atributo "href" debe ir dentro del componente no de la etiqueta.

Dependiendo la acción que realicemos con un elemento o componente que esta envuelto dentro del <Link /> ocurre lo siguiente:

Click en sobre el link:

• Realiza: Client Side Rendering.
• Solo carga lo que falta de la página.
• Cambia la ruta en el navegador.

Abrir un nuevo tab:

• Realiza: Server Side Rendering.
• Carga todo el HTML, CSS y JS.
• Crea una nueva sesión.

Atributo que pertenece a Link, lo que hace es decirle a next.js que ese link es importante y que es necesario ir precargando la información de este en el navegador.

• No carga los getInitialProps.
• Carga solo el payload (HTML, CSS y JS).
• Solo se precarga una vez.
• Solo funciona en producción. npm run build && npm start

Utilizamos Now.sh para desplegar nuestra aplicación en producción. Si no tenemos instalado now encones: npm install -g now

En la raíz del proyecto crear un archivo llamada now.json con la siguiente estructura:

{
  "version": 2,
	"builds": [
		{ "src": "package.json", "use": "@now/next" }
	]
}

Con el comando now --public now.sh lleva esta aplicación a producción.