Skip to content

Commit 730a3b7

Browse files
xiaoyu2erxiaoyu2er
committed
docs: update documentation translations
1 parent 3a12067 commit 730a3b7

File tree

369 files changed

+54611
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

369 files changed

+54611
-0
lines changed

‎apps/docs/content/es/docs/01-app/01-getting-started/01-installation.mdx‎

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,341 @@
1+
---
2+
source-updated-at: 2025-06-01T01:32:20.000Z
3+
translation-updated-at: 2025-06-02T20:04:05.283Z
4+
title: Cómo configurar un nuevo proyecto Next.js
5+
nav_title: Instalación
6+
description: Crea una nueva aplicación Next.js con la CLI `create-next-app` y configura TypeScript, ESLint y alias de rutas de módulos.
7+
---
8+
9+
{/* El contenido de este documento se comparte entre el enrutador de aplicaciones y páginas. Puedes usar el componente `<PagesOnly>Contenido</PagesOnly>` para agregar contenido específico del Enrutador de Páginas. Cualquier contenido compartido no debe estar envuelto en un componente. */}
10+
11+
## Requisitos del sistema
12+
13+
Antes de comenzar, asegúrate de que tu sistema cumpla con los siguientes requisitos:
14+
15+
- [Node.js 18.18](https://nodejs.org/) o superior.
16+
- macOS, Windows (incluyendo WSL) o Linux.
17+
18+
## Instalación automática
19+
20+
La forma más rápida de crear una nueva aplicación Next.js es usando [`create-next-app`](/docs/app/api-reference/cli/create-next-app), que configura todo automáticamente. Para crear un proyecto, ejecuta:
21+
22+
```bash filename="Terminal"
23+
npx create-next-app@latest
24+
```
25+
26+
Durante la instalación, verás los siguientes prompts:
27+
28+
```txt filename="Terminal"
29+
¿Cómo quieres llamar a tu proyecto? mi-app
30+
¿Deseas usar TypeScript? No / Sí
31+
¿Deseas usar ESLint? No / Sí
32+
¿Deseas usar Tailwind CSS? No / Sí
33+
¿Prefieres tu código dentro de un directorio `src/`? No / Sí
34+
¿Deseas usar el Enrutador de Aplicación? (recomendado) No / Sí
35+
¿Deseas usar Turbopack para `next dev`? No / Sí
36+
¿Quieres personalizar el alias de importación (`@/*` por defecto)? No / Sí
37+
¿Qué alias de importación deseas configurar? @/*
38+
```
39+
40+
Después de los prompts, [`create-next-app`](/docs/app/api-reference/cli/create-next-app) creará una carpeta con el nombre de tu proyecto e instalará las dependencias necesarias.
41+
42+
## Instalación manual
43+
44+
Para crear manualmente una nueva aplicación Next.js, instala los paquetes requeridos:
45+
46+
```bash filename="Terminal"
47+
npm install next@latest react@latest react-dom@latest
48+
```
49+
50+
Luego, agrega los siguientes scripts a tu archivo `package.json`:
51+
52+
```json filename="package.json"
53+
{
54+
"scripts": {
55+
"dev": "next dev",
56+
"build": "next build",
57+
"start": "next start",
58+
"lint": "next lint"
59+
}
60+
}
61+
```
62+
63+
Estos scripts corresponden a las diferentes etapas de desarrollo de una aplicación:
64+
65+
- `next dev`: Inicia el servidor de desarrollo.
66+
- `next build`: Construye la aplicación para producción.
67+
- `next start`: Inicia el servidor de producción.
68+
- `next lint`: Ejecuta ESLint.
69+
70+
<AppOnly>
71+
72+
### Crear el directorio `app`
73+
74+
Next.js usa enrutamiento basado en el sistema de archivos, lo que significa que las rutas en tu aplicación se determinan por cómo estructuras tus archivos.
75+
76+
Crea una carpeta `app`. Luego, dentro de `app`, crea un archivo `layout.tsx`. Este archivo es el [layout raíz](/docs/app/api-reference/file-conventions/layout#root-layout). Es obligatorio y debe contener las etiquetas `<html>` y `<body>`.
77+
78+
```tsx filename="app/layout.tsx" switcher
79+
export default function RootLayout({
80+
children,
81+
}: {
82+
children: React.ReactNode
83+
}) {
84+
return (
85+
<html lang="en">
86+
<body>{children}</body>
87+
</html>
88+
)
89+
}
90+
```
91+
92+
```jsx filename="app/layout.js" switcher
93+
export default function RootLayout({ children }) {
94+
return (
95+
<html lang="en">
96+
<body>{children}</body>
97+
</html>
98+
)
99+
}
100+
```
101+
102+
Crea una página de inicio `app/page.tsx` con contenido inicial:
103+
104+
```tsx filename="app/page.tsx" switcher
105+
export default function Page() {
106+
return <h1>¡Hola, Next.js!</h1>
107+
}
108+
```
109+
110+
```jsx filename="app/page.js" switcher
111+
export default function Page() {
112+
return <h1>¡Hola, Next.js!</h1>
113+
}
114+
```
115+
116+
Tanto `layout.tsx` como `page.tsx` se renderizarán cuando el usuario visite la raíz de tu aplicación (`/`).
117+
118+
<Image
119+
alt="Estructura de la carpeta App"
120+
srcLight="/docs/light/app-getting-started.png"
121+
srcDark="/docs/dark/app-getting-started.png"
122+
width="1600"
123+
height="363"
124+
/>
125+
126+
> **Nota importante**:
127+
>
128+
> - Si olvidas crear el layout raíz, Next.js creará automáticamente este archivo al ejecutar el servidor de desarrollo con `next dev`.
129+
> - Opcionalmente puedes usar una [carpeta `src`](/docs/app/api-reference/file-conventions/src-folder) en la raíz de tu proyecto para separar el código de tu aplicación de los archivos de configuración.
130+
131+
</AppOnly>
132+
133+
<PagesOnly>
134+
135+
### Crear el directorio `pages`
136+
137+
Next.js usa enrutamiento basado en el sistema de archivos, lo que significa que las rutas en tu aplicación se determinan por cómo estructuras tus archivos.
138+
139+
Crea un directorio `pages` en la raíz de tu proyecto. Luego, agrega un archivo `index.tsx` dentro de tu carpeta `pages`. Esta será tu página de inicio (`/`):
140+
141+
```tsx filename="pages/index.tsx" switcher
142+
export default function Page() {
143+
return <h1>¡Hola, Next.js!</h1>
144+
}
145+
```
146+
147+
```jsx filename="pages/index.js" switcher
148+
export default function Page() {
149+
return <h1>¡Hola, Next.js!</h1>
150+
}
151+
```
152+
153+
A continuación, agrega un archivo `_app.tsx` dentro de `pages/` para definir el layout global. Más información sobre el [archivo App personalizado](/docs/pages/building-your-application/routing/custom-app).
154+
155+
```tsx filename="pages/_app.tsx" switcher
156+
import type { AppProps } from 'next/app'
157+
158+
export default function App({ Component, pageProps }: AppProps) {
159+
return <Component {...pageProps} />
160+
}
161+
```
162+
163+
```jsx filename="pages/_app.js" switcher
164+
export default function App({ Component, pageProps }) {
165+
return <Component {...pageProps} />
166+
}
167+
```
168+
169+
Finalmente, agrega un archivo `_document.tsx` dentro de `pages/` para controlar la respuesta inicial del servidor. Más información sobre el [archivo Document personalizado](/docs/pages/building-your-application/routing/custom-document).
170+
171+
```tsx filename="pages/_document.tsx" switcher
172+
import { Html, Head, Main, NextScript } from 'next/document'
173+
174+
export default function Document() {
175+
return (
176+
<Html>
177+
<Head />
178+
<body>
179+
<Main />
180+
<NextScript />
181+
</body>
182+
</Html>
183+
)
184+
}
185+
```
186+
187+
```jsx filename="pages/_document.js" switcher
188+
import { Html, Head, Main, NextScript } from 'next/document'
189+
190+
export default function Document() {
191+
return (
192+
<Html>
193+
<Head />
194+
<body>
195+
<Main />
196+
<NextScript />
197+
</body>
198+
</Html>
199+
)
200+
}
201+
```
202+
203+
</PagesOnly>
204+
205+
### Crear la carpeta `public` (opcional)
206+
207+
Crea una [carpeta `public`](/docs/app/api-reference/file-conventions/public-folder) en la raíz de tu proyecto para almacenar recursos estáticos como imágenes, fuentes, etc. Los archivos dentro de `public` pueden ser referenciados por tu código usando la URL base (`/`).
208+
209+
Puedes referenciar estos recursos usando la ruta raíz (`/`). Por ejemplo, `public/profile.png` puede referenciarse como `/profile.png`:
210+
211+
```tsx filename="app/page.tsx" highlight={4} switcher
212+
import Image from 'next/image'
213+
214+
export default function Page() {
215+
return <Image src="/profile.png" alt="Perfil" width={100} height={100} />
216+
}
217+
```
218+
219+
```jsx filename="app/page.js" highlight={4} switcher
220+
import Image from 'next/image'
221+
222+
export default function Page() {
223+
return <Image src="/profile.png" alt="Perfil" width={100} height={100} />
224+
}
225+
```
226+
227+
## Ejecutar el servidor de desarrollo
228+
229+
1. Ejecuta `npm run dev` para iniciar el servidor de desarrollo.
230+
2. Visita `http://localhost:3000` para ver tu aplicación.
231+
3. Edita el archivo <AppOnly>`app/page.tsx`</AppOnly><PagesOnly>`pages/index.tsx`</PagesOnly> y guárdalo para ver los cambios actualizados en tu navegador.
232+
233+
## Configurar TypeScript
234+
235+
> Versión mínima de TypeScript: `v4.5.2`
236+
237+
Next.js incluye soporte integrado para TypeScript. Para agregar TypeScript a tu proyecto, renombra un archivo a `.ts` / `.tsx` y ejecuta `next dev`. Next.js instalará automáticamente las dependencias necesarias y agregará un archivo `tsconfig.json` con las opciones de configuración recomendadas.
238+
239+
<AppOnly>
240+
241+
### Plugin para IDE
242+
243+
Next.js incluye un plugin personalizado de TypeScript y un verificador de tipos, que VSCode y otros editores de código pueden usar para verificación avanzada de tipos y autocompletado.
244+
245+
Puedes habilitar el plugin en VS Code:
246+
247+
1. Abriendo la paleta de comandos (`Ctrl/⌘` + `Shift` + `P`)
248+
2. Buscando "TypeScript: Seleccionar versión de TypeScript"
249+
3. Seleccionando "Usar versión del espacio de trabajo"
250+
251+
<Image
252+
alt="Paleta de comandos de TypeScript"
253+
srcLight="/docs/light/typescript-command-palette.png"
254+
srcDark="/docs/dark/typescript-command-palette.png"
255+
width="1600"
256+
height="637"
257+
/>
258+
259+
</AppOnly>
260+
261+
Consulta la página de [referencia de TypeScript](/docs/app/api-reference/config/next-config-js/typescript) para más información.
262+
263+
## Configurar ESLint
264+
265+
Next.js incluye ESLint integrado. Instala automáticamente los paquetes necesarios y configura los ajustes adecuados cuando creas un nuevo proyecto con `create-next-app`.
266+
267+
Para agregar ESLint manualmente a un proyecto existente, agrega `next lint` como script en `package.json`:
268+
269+
```json filename="package.json"
270+
{
271+
"scripts": {
272+
"lint": "next lint"
273+
}
274+
}
275+
```
276+
277+
Luego, ejecuta `npm run lint` y serás guiado a través del proceso de instalación y configuración.
278+
279+
```bash filename="Terminal"
280+
npm run lint
281+
```
282+
283+
Verás un prompt como este:
284+
285+
> ? ¿Cómo deseas configurar ESLint?
286+
>
287+
> ❯ Estricto (recomendado)
288+
> Base
289+
> Cancelar
290+
291+
- **Estricto**: Incluye la configuración base de ESLint de Next.js junto con un conjunto de reglas más estrictas para Core Web Vitals. Esta es la configuración recomendada para desarrolladores que configuran ESLint por primera vez.
292+
- **Base**: Incluye solo la configuración base de ESLint de Next.js.
293+
- **Cancelar**: Omite la configuración. Selecciona esta opción si planeas configurar tu propia configuración personalizada de ESLint.
294+
295+
Si seleccionas `Estricto` o `Base`, Next.js instalará automáticamente `eslint` y `eslint-config-next` como dependencias en tu aplicación y creará un archivo `.eslintrc.json` en la raíz de tu proyecto que incluirá tu configuración seleccionada.
296+
297+
Ahora puedes ejecutar `next lint` cada vez que quieras ejecutar ESLint para detectar errores. Una vez configurado ESLint, también se ejecutará automáticamente durante cada construcción (`next build`). Los errores harán fallar la construcción, mientras que las advertencias no.
298+
299+
Consulta la página del [Plugin ESLint](/docs/app/api-reference/config/next-config-js/eslint) para más información.
300+
301+
## Configurar importaciones absolutas y alias de rutas de módulos
302+
303+
Next.js tiene soporte integrado para las opciones `"paths"` y `"baseUrl"` de los archivos `tsconfig.json` y `jsconfig.json`.
304+
305+
Estas opciones te permiten asignar alias a directorios del proyecto como rutas absolutas, haciendo más fácil y limpio importar módulos. Por ejemplo:
306+
307+
```jsx
308+
// Antes
309+
import { Button } from '../../../components/button'
310+
311+
// Después
312+
import { Button } from '@/components/button'
313+
```
314+
315+
Para configurar importaciones absolutas, agrega la opción `baseUrl` a tu archivo `tsconfig.json` o `jsconfig.json`. Por ejemplo:
316+
317+
```json filename="tsconfig.json o jsconfig.json"
318+
{
319+
"compilerOptions": {
320+
"baseUrl": "src/"
321+
}
322+
}
323+
```
324+
325+
Además de configurar la ruta `baseUrl`, puedes usar la opción `"paths"` para asignar alias a rutas de módulos.
326+
327+
Por ejemplo, la siguiente configuración mapea `@/components/*` a `components/*`:
328+
329+
```json filename="tsconfig.json o jsconfig.json"
330+
{
331+
"compilerOptions": {
332+
"baseUrl": "src/",
333+
"paths": {
334+
"@/styles/*": ["styles/*"],
335+
"@/components/*": ["components/*"]
336+
}
337+
}
338+
}
339+
```
340+
341+
Cada una de las rutas `"paths"` es relativa a la ubicación `baseUrl`.

0 commit comments

Comments
 (0)