Descripción del proyecto Next.js

Un proyecto de Next.js está compuesto por múltiples archivos y carpetas, cada uno con una función específica.

A continuación se muestra un análisis básico del código de un proyecto de Next.js, que te ayudará a comprender la estructura del proyecto y la función de cada parte.

Desde Next.js 13, Next.js introdujo el App Router basado en el sistema de archivos (directorio app), reemplazando el directorio tradicional pages. El nuevo directorio app ofrece funciones más potentes, como rutas anidadas, layouts, componentes de servidor, etc.

Estructura del proyecto

Un proyecto de Next.js que utilice el directorio app normalmente contiene los siguientes archivos y carpetas:

my-next-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── favicon.ico     # 网站图标
│   └── ...             # 其他静态资源（如图片、字体等）
├── app/                # 应用路由目录（核心）
│   ├── layout.js       # 根布局组件
│   ├── page.js         # 首页组件
│   ├── about/          # 关于页面
│   │   └── page.js     # 关于页面组件
│   ├── blog/           # 博客页面
│   │   ├── page.js     # 博客列表页
│   │   └── [slug]/     # 动态路由
│   │       └── page.js # 博客详情页
│   └── ...             # 其他页面和路由
├── components/         # 可复用的 React 组件
├── styles/             # 样式文件
├── utils/              # 工具函数
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
├── next.config.js      # Next.js 配置文件
└── README.md           # 项目说明文档

Análisis de archivos principales

app/layout.js

app/layout.jsEs el archivo de layout raíz, utilizado para definir la estructura de diseño de toda la aplicación.

app/layout.jsEnvuelve todas las páginas y puede contener estilos globales, metadatos, etc.

Ejemplo

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

app/page.js

app/page.jsEs el archivo de la página de inicio, correspondiente a la ruta/。

Ejemplo

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js 13!</h1>
    </div>
  );
}

app/about/page.js

app/about/page.jsEs el archivo de la página "acerca de", correspondiente a la ruta /about.

Ejemplo

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

app/blog/[slug]/page.js

app/blog/[slug]/page.jsEs un archivo de ruta dinámica, utilizado para manejar rutas como/blog/:slugde la ruta.

Ejemplo

export default function BlogPost({ params }) {
  return (
    <div>
      <h1>Blog Post: {params.slug}</h1>
    </div>
  );
}

app/loading.js

app/loading.jsArchivo de estado de carga, utilizado para mostrar el estado de carga mientras se carga la página.

Ejemplo

export default function Loading() {
  return <p>Loading...</p>;
}

app/error.js

app/error.jsEs el archivo de página de error, utilizado para capturar y mostrar errores.

Ejemplo

'use client'; // Marcar como componente de cliente

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

app/not-found.js

app/not-found.jsEs el archivo de la página 404, utilizado para mostrar la página no encontrada.

Ejemplo

export default function NotFound() {
  return (
    <div>
      <h2>Page Not Found</h2>
    </div>
  );
}

Análisis de nuevas características

1. Componentes de servidor (Server Components)

Next.js 13 utiliza por defecto componentes de servidor, lo que reduce la cantidad de JavaScript del cliente que se carga.

Los componentes de servidor pueden acceder directamente a los datos del backend, sin necesidad de llamadas API adicionales.

Ejemplo

async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{data.message}</div>;
}

2. Componentes de cliente (Client Components)

Si necesitas usar el estado de React o las API del navegador, puedes marcar el componente como componente de cliente.

Usa'use client'la directiva.

Ejemplo

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

3. Layouts anidados (Nested Layouts)

Se pueden crear layouts anidados en el directorio app; cada subdirectorio puede tener su propio archivo de layout.

Por ejemplo:

app/dashboard/layout.js: Layout de la página del panel de control.

app/dashboard/page.js: Contenido de la página del panel de control.

4. Renderizado en streaming (Streaming)

Next.js 13 admite renderizado en streaming, que permite renderizar el contenido gradualmente mientras se carga la página.

Ejemplo

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <Suspense fallback={<p>Loading...</p>}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

Ejecutar el proyecto

  1. Iniciar el servidor de desarrollo：

    • Ejecutanpm run devoyarn dev, inicia el servidor de desarrollo.

    • Abre el navegador y visitahttp://localhost:3000, para ver la aplicación.

  2. Compilar el código para producción：

    • Ejecutanpm run buildoyarn build, genera el código de producción optimizado.

  3. Iniciar el servidor de producción：

    • Ejecutanpm run startoyarn start, inicia el servidor de producción.

Otras extensiones