Volver a la página principal
viernes 12 julio 2024
97

Cómo crear una aplicación de ejemplo con Next.js

Introducción

Next.js es un framework de React que permite la creación de aplicaciones web con renderizado en el servidor (SSR), generación de sitios estáticos (SSG) y una gran cantidad de características avanzadas. En esta guía, vamos a crear una aplicación básica con Next.js paso a paso.

Prerrequisitos

Antes de comenzar, asegúrate de tener lo siguiente instalado en tu máquina:

  • Node.js (versión 12.x o superior)
  • npm o [Yarn](https://yarnpkg.com/)

Configuración del Proyecto

1. Crear un Nuevo Proyecto

Primero, crea un nuevo proyecto utilizando el comando create-next-app que configura una aplicación Next.js con todo lo necesario. 

npx create-next-app my-next-app

O si prefieres usar Yarn: 

yarn create next-app my-next-app

Este comando generará una estructura de directorios básica para tu aplicación Next.js.

2. Ejecutar el Proyecto

Una vez que el proyecto se haya creado, navega al directorio del proyecto y ejecuta la aplicación en modo de desarrollo. 

cd my-next-app
npm run dev

O con Yarn: 

cd my-next-app
yarn dev

Abre tu navegador y ve a http://localhost:3000. Deberías ver la página de inicio de tu nueva aplicación Next.js.

Estructura del Proyecto

La estructura del proyecto que create-next-app genera debería parecerse a esto: 

my-next-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── vercel.svg
├── styles/
│   ├── Home.module.css
│   └── globals.css
├── pages/
│   ├── _app.js
│   ├── index.js
│   └── api/
│       └── hello.js
├── .gitignore
├── package.json
├── README.md
└── next.config.js

Explicación de la Estructura

  • public/: Contiene activos estáticos como imágenes, fuentes, etc.
  • styles/: Contiene los archivos CSS.
  • pages/: Contiene las páginas de la aplicación. Next.js trata cada archivo en este directorio como una ruta.
  • _app.js: Archivo de personalización de la aplicación.
  • index.js: Archivo de la página de inicio.
  • api/: Directorio para las API routes.
  • package.json: Contiene las dependencias del proyecto y scripts de npm.

Creando Páginas

Next.js usa el sistema de archivos para la creación de rutas. Vamos a crear algunas páginas de ejemplo.

1. Página de Inicio

El archivo pages/index.js ya está creado. Vamos a modificarlo para que muestre un mensaje personalizado. 

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

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Mi App Next.js</title>
        <meta name="description" content="Generado por create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

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

        <p className={styles.description}>
          Comienza editando <code className={styles.code}>pages/index.js</code>
        </p>
      </main>
    </div>
  );
}

2. Página Acerca de

Crea un nuevo archivo llamado about.js en el directorio pages. 

// pages/about.js
import Head from 'next/head';

export default function About() {
  return (
    <div>
      <Head>
        <title>Acerca de Nosotros</title>
      </Head>
      <h1>Acerca de Nosotros</h1>
      <p>Esta es la página de Acerca de.</p>
    </div>
  );
}

Ahora puedes navegar a http://localhost:3000/about para ver la nueva página.

3. Navegación entre Páginas

Vamos a añadir navegación entre las páginas usando el componente Link de Next.js.

Modifica el archivo pages/index.js para incluir enlaces a otras páginas: 

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

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Mi App Next.js</title>
        <meta name="description" content="Generado por create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

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

        <p className={styles.description}>
          Comienza editando <code className={styles.code}>pages/index.js</code>
        </p>

        <nav>
          <ul>
            <li>
              <Link href="/">Inicio</Link>
            </li>
            <li>
              <Link href="/about">Acerca de</Link>
            </li>
          </ul>
        </nav>
      </main>
    </div>
  );
}

Estilos

Next.js soporta CSS y CSS-in-JS de manera predeterminada. Vamos a ver cómo añadir estilos a nuestra aplicación.

1. Estilos Globales

El archivo styles/globals.css se carga en todas las páginas. Puedes añadir tus estilos globales aquí. 

/* styles/globals.css */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. Estilos por Módulo

Next.js también soporta módulos CSS. Vamos a modificar Home.module.css para estilizar nuestra página de inicio. 

/* styles/Home.module.css */
.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  margin: 0;
  line-height: 1.15;
  font-size: 4rem;
}

.title a {
  color: #0070f3;
  text-decoration: none;
}

.title a:hover,
.title a:focus,
.title a:active {
  text-decoration: underline;
}

.description {
  text-align: center;
}

.code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.75rem;
  font-size: 1.1rem;
  font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;
}

Añadiendo Componentes

Vamos a crear un componente reutilizable y utilizarlo en nuestras páginas.

1. Crear el Componente

Crea un directorio llamado components en la raíz del proyecto y añade un archivo Navbar.js. 

// components/Navbar.js
import Link from 'next/link';

export default function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Inicio</Link>
        </li>
        <li>
          <Link href="/about">Acerca de</Link>
        </li>
      </ul>
    </nav>
  );
}

2. Usar el Componente en las Páginas

Ahora vamos a usar este componente en nuestras páginas. Modifica pages/index.js y pages/about.js para incluir Navbar. 

// pages/index.js
import Head from 'next/head';
import Navbar from '../components/Navbar';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Mi App Next.js</title>
        <meta name="description" content="Generado por create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Navbar />

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

        <p className={styles.description}>
          Comienza editando <code className={styles.code}>pages/index.js</code>
        </p>
      </main>
    </div>
  );
}
``

`

```jsx
// pages/about.js
import Head from 'next/head';
import Navbar from '../components/Navbar';

export default function About() {
  return (
    <div>
      <Head>
        <title>Acerca de Nosotros</title>
      </Head>
      <Navbar />
      <h1>Acerca de Nosotros</h1>
      <p>Esta es la página de Acerca de.</p>
    </div>
  );
}

Uso de Fetch para Obtener Datos

Next.js facilita la obtención de datos del lado del servidor. Vamos a crear una página que obtenga datos de una API externa.

1. Crear la Página

Crea un archivo posts.js en el directorio pages. 

// pages/posts.js
import Head from 'next/head';

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return {
    props: {
      posts,
    },
  };
}

export default function Posts({ posts }) {
  return (
    <div>
      <Head>
        <title>Posts</title>
      </Head>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Este ejemplo usa getStaticProps para obtener datos en el momento de la construcción y generar una página estática.

2. Añadir Navegación a la Nueva Página

Actualiza el componente Navbar para incluir un enlace a la nueva página. 

// components/Navbar.js
import Link from 'next/link';

export default function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Inicio</Link>
        </li>
        <li>
          <Link href="/about">Acerca de</Link>
        </li>
        <li>
          <Link href="/posts">Posts</Link>
        </li>
      </ul>
    </nav>
  );
}

Ahora puedes navegar a http://localhost:3000/posts para ver la lista de publicaciones obtenidas de la API.

Rutas Dinámicas

Next.js soporta rutas dinámicas que permiten crear páginas basadas en datos dinámicos.

1. Crear una Ruta Dinámica

Vamos a crear páginas dinámicas para cada post. Primero, crea un directorio [id] en el directorio pages/posts. 

// pages/posts/[id].js
import Head from 'next/head';

export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

export default function Post({ post }) {
  return (
    <div>
      <Head>
        <title>{post.title}</title>
      </Head>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

Este ejemplo usa getStaticPaths para generar rutas dinámicas y getStaticProps para obtener los datos de cada post.

2. Actualizar la Página de Posts

Modifica pages/posts.js para enlazar a las páginas de los posts individuales. 

// pages/posts.js
import Head from 'next/head';
import Link from 'next/link';

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return {
    props: {
      posts,
    },
  };
}

export default function Posts({ posts }) {
  return (
    <div>
      <Head>
        <title>Posts</title>
      </Head>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

Ahora puedes navegar a http://localhost:3000/posts y hacer clic en cualquier post para ver los detalles.

Despliegue

Next.js se puede desplegar fácilmente en servicios como Vercel, Netlify o cualquier proveedor de hosting que soporte Node.js.

1. Desplegar en Vercel

Vercel es la plataforma de despliegue creada por los mismos creadores de Next.js. Puedes desplegar tu aplicación con unos pocos clics.

1. Instala la CLI de Vercel: 

npm i -g vercel

2. En el directorio de tu proyecto, ejecuta: 

vercel

3. Sigue las instrucciones para completar el despliegue.

2. Desplegar en Netlify

Para desplegar en Netlify, puedes usar la CLI de Netlify o enlazar tu repositorio a Netlify en su panel de control.

1. Instala la CLI de Netlify: 

npm install -g netlify-cli

2. En el directorio de tu proyecto, ejecuta: 

netlify init
netlify deploy

3. Sigue las instrucciones para completar el despliegue.

Conclusión

Hemos cubierto los conceptos básicos de Next.js, incluyendo la configuración del proyecto, la creación de páginas, el uso de componentes, la obtención de datos, las rutas dinámicas y el despliegue. Next.js es una herramienta poderosa y flexible que te permite crear aplicaciones web rápidas y escalables. ¡Ahora estás listo para explorar más características avanzadas y construir aplicaciones impresionantes con Next.js!

Etiquetas:
nextjs javascript desarrollo web
Compartir:
Creado por:
Author photo

Jorge García

Fullstack developer