Next.js es un marco de React popular que permite a los desarrolladores crear aplicaciones rápidas renderizadas en el servidor. Proporciona potentes funciones listas para usar, como generación de sitios estáticos (SSG), representación del lado del servidor (SSR) y rutas API. En esta guía, recorreremos el proceso de creación de su primera aplicación Next.js, centrándonos en conceptos clave y ejemplos prácticos.

1. Configurando su proyecto Next.js

Para comenzar con Next.js, necesita tener Node.js instalado en su máquina. Una vez que haya configurado Node.js, puede crear una nueva aplicación Next.js usando el siguiente comando:

npx create-next-app my-next-app

Este comando crea un nuevo directorio llamado my-next-app con todos los archivos y dependencias necesarios para iniciar una aplicación Next.js.

2. Navegando por la estructura del proyecto

Después de crear su proyecto, navegue hasta el directorio del proyecto:

cd my-next-app

Dentro del directorio my-next-app, encontrarás una estructura similar a esta:

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

El directorio de páginas es donde creará las páginas de su aplicación, mientras que público es para activos estáticos.

3. Creando tu primera página

Next.js utiliza un sistema de enrutamiento basado en archivos. Para crear una nueva página, simplemente agregue un nuevo archivo JavaScript dentro del directorio de páginas. Por ejemplo, cree un archivo llamado about.js:

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    

      
About Page
      
This is the about page of my first Next.js application!
      Go back home
    
  );
}

En este ejemplo, creamos una página Acerca de simple y utilizamos el componente Enlace para regresar a la página de inicio.

4. Modificar la página de inicio

Abra el archivo index.js en el directorio de páginas. Este archivo representa la página de inicio de su aplicación. Puedes modificarlo de la siguiente manera:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    

      
Welcome to My Next.js App
      

        This is my first application built with Next.js.{' '}
        Learn more about me
      
    
  );
}

Aquí agregamos un estilo simple y un enlace a la página Acerca de.

5. Agregar estilos a su aplicación

Next.js admite módulos CSS listos para usar. Para diseñar sus componentes, puede crear un módulo CSS en el directorio de estilos. Por ejemplo, cree un archivo llamado Home.module.css:

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

A continuación, importe este módulo CSS a su página index.js como se muestra en la sección anterior.

6. Obteniendo datos con Next.js

Next.js facilita la obtención de datos utilizando getStaticProps para la generación de sitios estáticos o getServerSideProps para la representación del lado del servidor. Por ejemplo, para recuperar datos en la página de inicio, puede modificar index.js de esta manera:

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

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    

      
Welcome to My Next.js App
      

        {posts.map(post => (
          
{post.title}
        ))}
      
  );
}

En este código, obtenemos una lista de publicaciones de una API pública y las mostramos en la página de inicio.

7. Creación de rutas API

Next.js le permite crear rutas API en el directorio páginas/api. Estas rutas se pueden utilizar para desarrollar la funcionalidad de backend. Por ejemplo, cree un archivo llamado hello.js en el directorio páginas/api:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

Puedes acceder a esta ruta API navegando a http://localhost:3000/api/hello.

8. Implementación de su aplicación Next.js

Una vez que su aplicación esté lista, puede implementarla fácilmente. Vercel es la plataforma de alojamiento recomendada para aplicaciones Next.js. Puedes implementar tu aplicación siguiendo estos pasos:

1. Crea una cuenta de Vercel si no tienes una.

2. Instalar la CLI de Vercel globalmente:
   

   npm install -g vercel
   

3. Ejecute el siguiente comando en el directorio de su proyecto:
   

   vercel
   

4. Sigue las indicaciones para implementar tu aplicación.

9. Agregar enrutamiento dinámico

Next.js admite el enrutamiento dinámico mediante corchetes. Por ejemplo, si desea crear una página de publicación de blog dinámica, puede crear un archivo llamado [id].js en el directorio páginas/publicaciones:

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return 
Post: {id}
;
}

Ahora puedes acceder a una publicación específica navegando a /posts/1, /posts/2, etc.

10. Implementación de estilos globales

Si desea aplicar estilos globales a su aplicación, puede hacerlo creando un archivo llamado _app.js en el directorio de páginas:

// pages/_app.js
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return ;
}

A continuación, cree un archivo globals.css en el directorio de estilos y agregue sus estilos globales:

/* styles/globals.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

11. Uso de variables de entorno

Next.js admite variables de entorno para almacenar información confidencial. Puede crear un archivo .env.local en la raíz de su proyecto y agregar sus variables:

API_URL=https://example.com/api

Luego puedes acceder a esta variable en tu aplicación usando Process.env:

// Example usage in a component
const apiUrl = process.env.API_URL;

¡Felicitaciones por crear su primera aplicación Next.js! A lo largo de este viaje, ha aprendido cómo configurar su proyecto, crear páginas dinámicas, recuperar datos sin problemas, implementar enrutamiento sólido e implementar su aplicación con facilidad.

Next.js es más que un simple marco; Es una herramienta poderosa que puede mejorar significativamente su experiencia de desarrollo web. Sus funciones integradas, como la generación de sitios estáticos (SSG) y la representación del lado del servidor (SSR), le permiten crear aplicaciones rápidas y fáciles de usar que están optimizadas para el rendimiento y el SEO.

Próximos pasos en su viaje a Next.js

Ahora que ha creado con éxito su primera aplicación Next.js, es hora de llevar sus habilidades al siguiente nivel. En esta próxima serie de publicaciones, profundizaremos en algunas de las funciones más avanzadas de Next.js que pueden mejorar sus aplicaciones y agilizar su proceso de desarrollo.

Middleware es una característica poderosa que le permite ampliar la funcionalidad de su aplicación agregando lógica personalizada antes de que se complete una solicitud. Esto significa que puede manipular los objetos de solicitud y respuesta, autenticar usuarios o incluso administrar redireccionamientos sin problemas.

A continuación, exploraremos la Generación de sitios estáticos (SSG). Esta técnica renderiza previamente las páginas en el momento de la compilación, lo que permite velocidades de carga rápidas y un rendimiento SEO mejorado. Al comprender cómo aprovechar SSG, puede crear aplicaciones que no solo sean dinámicas sino también increíblemente eficientes.

Finalmente, cubriremos Rutas API, una característica que le permite crear funciones sin servidor directamente dentro de su aplicación Next.js. Esto significa que puede manejar solicitudes y respuestas sin necesidad de un servidor independiente, lo que facilita el desarrollo de aplicaciones completas con menos gastos generales.

Sígueme mientras nos embarcamos en este emocionante viaje hacia las capacidades avanzadas de Next.js. Con estas herramientas a su disposición, podrá crear aplicaciones sólidas y de alto rendimiento que realmente se destacan. ¡Estén atentos a nuestra próxima publicación!

Puedes leer este post también en:

Introducción a Next.js: creación de su primera aplicación

Next.js es un marco React popular que permite a los desarrolladores crear aplicaciones rápidas renderizadas en servidor. ¡Proporciona potentes funciones listas para usar!

salmaniyad.hashnode.dev

Encuéntrame en:

SalmanIyad · GitHub

Ingeniero en Sistemas Computacionales | Desarrollador web. SalmanIyad tiene 31 repositorios disponibles. Siga su código en GitHub.

github.com