Instalación de Next.js

Antes de comenzar, asegúrate de tener instalados Node.js y npm. Puedes verificar si están instalados ejecutando los siguientes comandos:

node -v
npm -v

Si tu sistema aún no es compatible con Node.js y NPM, puedes consultar nuestroTutorial de Node.js。

El uso de npm en China es muy lento. Puedes usar la herramienta de línea de comandos cnpm personalizada de Taobao (compatible con compresión gzip) en lugar del npm predeterminado:

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

De esta manera, puedes usar el comando cnpm para instalar módulos:

$ cnpm install [name]

Puedes consultar más información en:http://npm.taobao.org/。

Usar create-react-app para construir rápidamente un entorno de desarrollo de Next.js

Next.js proporciona una herramienta oficial de andamiaje llamada create-next-app, que se utiliza para crear proyectos rápidamente.

create-react-app proviene de Facebook. Con este comando, podemos construir rápidamente un entorno de desarrollo de Next.js sin necesidad de configuración.

Los proyectos creados automáticamente por create-react-app se basan en Webpack + ES6.

Ejecuta el siguiente comando para crear el proyecto:

npx create-next-app@latest my-next-app

Durante la instalación, verás las siguientes indicaciones. Solo presiona Enter en todas:

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 your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

    npx es una herramienta de Node.js que se utiliza para ejecutar los binarios de un paquete sin necesidad de instalarlos globalmente.

  • Usacreate-next-appla herramienta de andamiaje para crear un nuevo proyecto de Next.js.
  • my-next-appes el nombre del proyecto. Puedes cambiarlo a cualquier nombre según sea necesario.
  • Instalará automáticamente las dependencias necesarias para el proyecto.

Después de ejecutar este comando, create-next-app realizará automáticamente las siguientes acciones:

  • Creará una carpeta llamada my-next-app.
  • Inicializará el proyecto e instalará las dependencias necesarias.
  • Creará la estructura básica del proyecto, incluyendo la carpeta app, la carpeta public, el archivo package.json, etc.

Una vez completada la creación, entra al directorio del proyecto:

cd my-next-app

En el directorio del proyecto, ejecuta el siguiente comando para iniciar el servidor de desarrollo:

npm run dev

O si usas yarn:

yarn dev

El servidor de desarrollo se ejecuta por defecto enhttp://localhost:3000, abre el navegador y visita http://localhost:3000, deberías ver la página de bienvenida predeterminada de Next.js.

Podemos modificar el archivo page.tsx en el directorio app. El código modificado es el siguiente:

app/page.tsx

export default function Home() {
    return <div>Hello, World!</div>;
}

Visita http://localhost:3000, se muestra lo siguiente:

Hello, World!

Instalación manual de Next.js

Para crear manualmente una nueva aplicación de Next.js, primero instala los paquetes necesarios:

npm install next@latest react@latest react-dom@latest

A continuación, abre tu archivo package.json y agrega los siguientes scripts:

Archivo package.json:

{
  "scripts": {
    "dev": "next dev",        // Inicia Next.js en modo de desarrollo
    "build": "next build",    // Compila la aplicación para producción
    "start": "next start",    // Inicia el servidor de producción de Next.js
    "lint": "next lint"       // Configura el ESLint integrado de Next.js
  }
}

Estos scripts representan las diferentes etapas del desarrollo de una aplicación:

  • dev: ejecutanext dev, inicia Next.js en modo de desarrollo.
  • build: ejecutanext build, compila la aplicación para producción.
  • start: ejecutanext start, inicia el servidor de producción de Next.js.
  • lint: ejecutanext lint, configura el ESLint integrado de Next.js.

Crear el directorio de la aplicación

Next.js utiliza el enrutamiento por sistema de archivos, lo que significa que las rutas de la aplicación están determinadas por la estructura de archivos.

Crea una carpeta app y luego agrega un archivo layout.tsx y un archivo page.tsx. Cuando el usuario accede a la ruta raíz de la aplicación/, estos archivos se renderizan.

Crear el archivo layout raíz

Enapp/layout.tsxCrea el archivo layout raíz, que incluye las<html>y<body>etiquetas:

Ejemplo

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Crear el archivo de la página de inicio

Finalmente, crea un archivo de página principal en app/page.tsx y agrega el contenido inicial:

Ejemplo

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

Notas

  • Si olvidas crearlayout.tsx, Next.js, al ejecutar el servidor de desarrollo (next dev), creará automáticamente este archivo.
  • Puedes usar opcionalmente, en el directorio raíz del proyecto,srcel directorio, para separar el código de la aplicación de los archivos de configuración.

Crear la carpeta public (opcional)

Puedes optar por crear, en el directorio raíz del proyecto, unapubliccarpeta, para almacenar recursos estáticos, como imágenes, fuentes, etc.publicLos archivos en la carpeta se pueden/referenciar mediante la ruta ...

De esta manera, has completado la instalación manual y la inicialización de una estructura básica de proyecto de Next.js.

Ejecutar el servidor de desarrollo

Ejecuta el siguiente comando para iniciar el servidor de desarrollo:

npm run dev

Visita http://localhost:3000 para ver la aplicación.

Editaapp/page.tsxel archivo y guárdalo. Después podrás ver el resultado actualizado en el navegador.

Otras extensiones