Migrando proyecto React JS a Next JS

En este artículo, damos por hecho que se conocen las bases de Next.js. Para entender qué es Next JS, los beneficios que tiene SSR (Server Side Rendering), y una comparativa con Gatsby y Express, podéis leer este artículo Next.js

¿Por qué migrar a Next JS?

Cada día es más común que los negocios tengan una página web, aunque de momento solo 48% disponen de ella. Hablando de la mitad que ya se ha digitalizado, si quieres aumentar tu presencia en internet es imprescindible que tengas un buen posicionamiento en los principales buscadores, y, por tanto, que cuides el SEO de tu página para que los crawlers lo detecten y te hagan escalar posiciones cuando los usuarios busquen en internet.

Es por este motivo que si actualmente tienes una página web hecha en React JS o Vue JS vas a necesitar migrar a Next JS o Nuxt JS respectivamente para poder obtener el mayor número de visitas orgánicas. Otra forma de aumentar visualizaciones sería el SEO pagado, ya sea por productos de tu web, o palabras clave relacionadas de tu sector.

Relacionado con los beneficios que se comentan al artículo mencionado anteriormente, migrar a Next JS nos aporta principalmente la posibilidad de tener una página web renderizada en el servidor, y, por tanto, con la posibilidad de tener SEO en nuestra web.

Después de migrar a Next JS, tendremos la posibilidad de escoger nuestra estrategia para renderizar nuestro contenido. Data fetching nos permite renderizar una página en SSR y otra en CSR (Cliente), por tanto, podremos mantener todo lo teníamos en nuestra antigua app con React, pero con la posibilidad de añadir SSR cuando y donde queramos.

Primeros pasos

En este artículo vamos a cubrir una migración de un proyecto create react app que no haya sido ejected.

Actualizamos nuestro package.json quitando react-router-dom y react-scripts y añadimos npm i next

Añadimos los scripts de next:

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

Assets

Necesitaremos el directorio public pero en react ya lo tendremos con en index.html y los estáticos. Next.js lo usa únicamente para los estáticos.

Asī que tendremos que mover el index.html al root de nuestro proyecto.

Rutas

Para el sistema de rutas next no usa ninguna librería de terceros, como React Router en react. Next.js trae su propio sistema de routing.

• Creamos el directorio pages en root
• Movemos nuestro App.js a pages/index.js
• Creamos un nuevo fichero dentro de pages para cada Route que tengamos.
• Para rutas dinámicas (ej: /blog/:id), podemos hacerlo (ej: /pages/blog/[id].js). T

Acceso a Web APIs de forma segura

Con aplicaciones renderizadas en el lado del cliente, podemos acceder a window, localStorage, navigator. En el caso de Next.js, al usar pre-rendering, tendremos que asegurarnos que tenemos este acceso solo cuando estemos en el lado del cliente:

if (typeof window !== 'undefined') {
  // Aquí tenemos acceso a `window`
}

La forma recomendada de acceder es usando el hook:

import { useEffect } from 'react'

useEffect(() => {
  // Aquí tenemos acceso a `window`
}, [])

Optimizaciones

Optimizando las imágenes

A partir de la versión 10.0.0, podemos usar el componente de next/image que es una extensión del tag HTML tag ««`.
Este componente optimiza automáticamente las imágenes y las redimensiona y sirve en el moderno formato WebP siempre que el navegador lo permita

Otro punto importante, és que Next.js no las optimiza en build time sino que lo hace on-demand cuando el usuario lo requiere.
Por tanto, el build time va a ser el mismo con 10 o con 10 millones de imágenes.

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>Apiumhub</h1>
      <Image
        src="/me.png"
        alt="Next.js for Apiumhub"
        width={500}
        height={500}
      />
      <p>Welcome to my blog!</p>
    </>
  )
}

Optimizando para SEO

Seguramente para react estás familiarizado con react-helmet para añadir meta tags y mejorar el SEO.
Con next, usaremos next/head para añadir meta tags al tag <head /> de tu página.

// src/components/seo.js

import Head from 'next/head'

export default function SEO({ description, title, siteTitle }) {
  return (
    <Head>
      <title>{`${title} | ${siteTitle}`}</title>
      <meta name="description" content={description} />
      <meta property="twitter:title" content={title} />
      <meta property="twitter:description" content={description} />
    </Head>
  )
}

Variables de entorno

La única diferencia para las variables de entorno con Create React App es el prefijo para exponerlas en el lado del cliente.

Cambia todas las variables de: REACT_APP_ al prefijo NEXT_PUBLIC_.

Single-Page App (SPA)

Si quieres mover tu proyecto a un SPA, puedes mover tu index.html a una ruta genérica que se llame: pages/[[[...app]]].js..

// pages/[[...app]].js

import { useState, useEffect } from 'react'
import CreateReactAppEntryPoint from '../components/app'

function App() {
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => {
    setIsMounted(true)
  }, [])

  if (!isMounted) {
    return null
  }

  return <CreateReactAppEntryPoint />
}

export default App