¿Cómo instalar de manera automática NextJS?
Se recomienta utilizar create-next-app, el cual configura todo de manera automática.
npx create-next-app@latest
El comando mostrará los siguientes mensajes…
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
Después de utilizar
create-next-appse generara un directorio con el nombre del proyecto y las dependencias necesarias.
¿Cómo instalar de manera manual NextJS?
Para crear de forma manual una aplicación de NextJS, agregue los paquetes requeridos mediante el siguiente comando.
npm install next@latest react@latest react-dom@latest
Abre el archivo package.json y agrega el siguiente bloque en scripts.
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
Estos scripts hacen referencia a los diferentes escenarios de una aplicación:
| Escenario | Descripción |
|---|---|
| next dev | Ejecuta Next.js en modo de desarrollo. |
| next build | Compila la aplicación final para el entorno de producción. |
| next start | Ejecuta la aplicación en el servidor de producción. |
| next lint | Para inicial la configuración de ESLint del proyecto. |
Creación de directorios
Next.js utiliza un sistema de enrutamiento basado en el sistema de archivos, lo que significa que las rutas en tu aplicación se determinan según la estructura de tus archivos.
El directorio “app”
Para aplicaciones nuevas, se recomienda utilizar App Router. Este router permite utilizar las características mas recientes de React y es la evolución del Page Router (Ruter basado en páginas), resultado de las recomendaciones de la comunidad de Next.js.
Crea un directorio app y dentro de este los archivos layout.tsx y page.tsx. Estos se desplegarán cuando el usuario visite la aplicación Next en su ruta raiz /.
Crea un componente de layout dentro de app/layout.tsx.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
Finalmente crea el contenido de la página principal del home en app/page.tsx.
export default function Page() {
return <h1>Hola Mundo!</h1>
}
El directorio “public”
Crea un directorio public dentro del directorio principal, este servirá para almacenar imágenes, fuentes, etc. Los archivos dentro de public pueden ser vistos directamente desde la web usando la ruta principal /,
Conclusiones
En resumen, Next.js facilita la creación de aplicaciones React con su sistema de enrutamiento basado en archivos y herramientas como create-next-app. Ya sea configurando manualmente o utilizando App Router, Next.js ofrece flexibilidad y eficiencia en el desarrollo web.