Introducción a Next.js: Estructura y primeras páginas

Requisitos básicos

Antes de empezar hay que tener en cuenta que para usar Next.js hay que tener conocimientos de Javascript para desenvolverse bien con el uso de React y de Node.js.

¿Qué es Next.js??

Es un framework full-stack en el que se usa React como base para poder servir al usuario final páginas web. Uno de los puntos fuertes de Next.js es que páginas pueden estar generadas en tiempo real desde el servidor usando Server Side Rendering(SSR) o generadas de manera estática con Static Site Generation(SSG).

  • SSR: en las páginas SSR, los componentes React se ejecutan en el servidor, generando HTML y son entregadas al usuario en el momento de consultar una URL. Luego el framework de Next.js interpreta el HTML añadiendo la interacción programada con React. Esto es perfecto para páginas que requieren obtener datos de una API o bases de datos.
  • SSG: en las páginas SSG, el servidor calcula todo el HTML una vez, concretamente en el momento de levantar el servidor, y a partir de ahí siempre entrega el mismo HTML. Luego el framework añade la interacción con React. Esto es perfecto para páginas estáticas como son FAQs, páginas de error o que cambian poco como los términos legales.

¿Por qué usar Next.js??

Si comparamos Next.js con React Create App, la diferencia principal es como se ejecuta React. Sin Next.js todos los componentes se generan en el cliente y en el momento que el usuario visita la página. No hay nada que pase en el servidor.

Con Next.js nuestros componentes  ya son páginas HTML cuando el usuario navega por nuestras páginas, por lo que nuestra web se comporta como un SPA ( Simple Page Application).

Usar SSRy SSG , para el usuario final, es una mejora del rendimiento y de UX. Que los componentes vengan renderizados del servidor significa menos trabajo en el navegador y por lo tanto navegación más rápida.

Hay otras ventajas de renderizar desde el servidor, como poder trabajar el SEO ( Search Engine Optimization) cosa que no se puede hacer por con React Create App.

¿Cómo se crea una aplicación Next.js??

Next.js tiene un script para arrancar un proyecto nuevo. Para crear un proyecto en local hay que disparar el siguiente comando en tu terminal:

npx create-next-app nueva-next-app
cd nueva-next-app

Cuando termine, podemos arrancar el servidor desde nuestro local ejecutando el siguiente comando:

npm run dev

Y obtendremos la siguiente web en http://localhost:3000 .

Estructura de directorios de Next.js

Boilerplate

  • styles/: Aquí es donde encontraremos el CSS. Por defecto viene un archivo global.css. Aquí puedes incluir tu reset CSS.
  • public/: Aquí es donde vas a subir los assets: fuentes, imágenes, manifest.json, etc.

Directorios para front-end

  • pages/: Aquí es donde se crearán las páginas. El nombre del archivo, por defecto, será la ruta del archivo. Cada página es un componente React.
  • index.js: La página index, que es un componente React.
  • app.js: Esto no es una página, sino el componente React base que Next.js usará para colocar tus páginas. Este componente React es el esqueleto de tu app y todos los componentes página se renderizan dentro de app.

Directorio para API

  • pages/api/: endpoints de las APIs.

¿Directorio para Backend??

No hay directorio para poner lógica de back-end por defecto. Al final el código back-end tendrás que llamarlo desde el código que vive en el directorio APIs o en pages. Hay quien crea el directorio /lib y coloca el código de sus servicios back-end ahí.

Usando Next.js para crear una app.

Anatomía de una página en Next.js

Una página en Next.js es un componente React. Veamos que aspecto tiene la página por defecto:

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h3>Documentation &rarr;</h3>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h3>Learn &rarr;</h3>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h3>Examples &rarr;</h3>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h3>Deploy &rarr;</h3>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
        </a>
      </footer>
    </div>
  );
}

Como se puede comprobar, no hay nada que no sea el típico React. Next.js exportará la variable o clase definida en export default aquello que renderizar dentro de _app para crear la página.

Escribiendo una nueva página

Vamos a modificar la página index.js y vamos a crear una segunda second.js para demostrar lo sencillo que es.

Para la página index.js reemplaza el contenido por el siguiente:

export default function Home() {
  return (
    <div>Primera página</div>
  );
}

Si ahora ejecutas npm run dev y visitas http://localhost:3000/ verás que en tu index aparece el mensaje Primer página.

Para la segunda página second.js vamos a realizar algo similar. Copia el siguiente contenido:

export default function SecondPage() {
  return (
    <div>Segunda página</div>
  );
}

Si ahora ejecutas npm run dev y visitas http://localhost:3000/second verás esta página.

Añadiendo nuestros propios componentes

Vamos a crear un componente propio. Normalmente la comunidad los está creando en un directorio llamado /components. Ahí crearemos nuestros components.

Para esta introducción, crearemos un menú desde el cual enlazar las 2 páginas.

// components/Menu.jsx

export const Menu = () => {
    return (
    <nav>
        <ul>
            <li><a href="/">Inicio</a></li>
            <li><a href="/second">Segunda página</a></li>
        </ul>
    </nav>
    )
}

Como estamos definiendo una navegación general, vamos a modificar el archivo _app.js  para incluir ahí nuestra navegación y que todas las páginas tengan así acceso:

import '../styles/globals.css'
import {Menu} from '../components/Menu'

function MyApp({Component, pageProps}) {
  return (
  <>
      <div>
          <Menu />
      </div>
      <div>
          <Component {...pageProps} />
      </div>
  </>
  );
}

export default MyApp;

Si ahora visitas http://localhost:3000 tendrás un menú de navegación mostrándose en la página por defecto index.js y cuando navegues a /second seguirás viendo el mismo menú.

Enlazando páginas en Next.js

Aunque en nuestro componente Menu.jsx tenemos unos enlaces funcionando, usar el tag a no es la manera correcta de usar Next.js si queremos beneficiarnos de la funcionalidad SPA. Para ello hay que usar un componente ya definido en next/link de nombre Link.

Aplicando los cambios, nuestro Menu.jsx quedaría de la siguiente manera.

// components/Menu.jsx
import Link from 'next/link'; 

export const Menu = () => {
    return (
    <nav>
        <ul>
            <li><Link href="/">Inicio</Link></li>
            <li><Link href="/second">Segunda página</Link></li>
        </ul>
    </nav>
    )
}

Los cambios son pocos, sin embargo el componente Link puede aceptar variables para construir URLs dinámicas. Pero esto lo veremos en posteriores artículos de Next.js

Conclusión

Ahora ya sabes las principales funcionalidades de Next.js puedes crear páginas básicas con React.

En futuros artículos obtendremos datos desde els servidor, ya sea desde una base de datos como creando y usando un endpoint dentro del directorio pages/api.

Comparte este artículo