Componentes y Diseño de Next.js
Las funciones de componentes y diseño de Next.js proporcionan a los desarrolladores herramientas potentes para ayudar a construir aplicaciones web modulares y mantenibles.
| Función | Descripción |
|---|---|
| Componentes | Componentes de página, componentes de UI, componentes funcionales, utilizados para construir las diversas partes de la aplicación. |
| Diseño | Diseño global, diseño anidado, diseño dinámico, utilizados para definir la estructura de la página y los elementos comunes. |
| Archivos especiales (versión antigua) | _app.js、_document.js、_error.js, utilizados para definir el diseño global y la estructura del documento. |
En Next.js 13, el directorio app reemplazó al tradicional directorio pages para gestionar las rutas y la estructura de las páginas. El directorio app introdujo mecanismos más flexibles de diseño, enrutamiento y obtención de datos, así como capacidades mejoradas de renderizado paralelo.
Ejemplo de estructura del directorio app:
├── app/ │ ├── page.js # 默认首页 │ ├── about/ │ │ ├── page.js # About 页 │ └── layout.js # 根布局 └── public/ # 静态文件目录
Componentes
Los componentes son las unidades básicas para construir aplicaciones Next.js. Pueden ser componentes de página, componentes de UI o componentes funcionales.
En Next.js, todas las páginas y diseños son básicamente componentes de React. Puedes crear y usar componentes igual que en cualquier aplicación de React.
Componente de página
El componente de página es la base del enrutamiento en Next.js; cada componente de página corresponde a una ruta.
Los componentes de página generalmente se almacenan en el directorio app o pages.
Ejemplo
export default function About() {
return <div>About Page</div>;
}
Componente de UI
Los componentes de UI son elementos de interfaz reutilizables, como botones, tarjetas, barras de navegación, etc.
Los componentes de UI generalmente se almacenan en el directorio components.
Ejemplo
export default function Button({ children }) {
return <button>{children}</button>;
}
Componente funcional
Los componentes funcionales son componentes que implementan funcionalidades específicas, como obtención de datos, gestión de estado, etc.
Los componentes funcionales generalmente se almacenan en el directorio hooks o utils.
Ejemplo
import { useEffect, useState } from 'react';
export default function useData(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => setData(data));
}, [url]);
return data;
}
Ejemplo
Crear componentes:Crea Hello.js en el directorio app/components/, con el siguiente código:
Ejemplo
const Hello = () => {
return <h1>Hello, Next.js 13!</h1>;
};
export default Hello;
Usar componentes:En el directorio app, los componentes de página se exportan desde page.js, donde puedes usarlos:
Ejemplo
import Hello from './components/Hello';
export default function Home() {
return (
<div>
<Hello />
</div>
);
}
Diseño
El diseño es un componente utilizado para definir la estructura de la página, que suele incluir elementos comunes como encabezado, pie de página, barra de navegación, etc.
Diseño global
El diseño global se aplica a toda la aplicación y generalmente se define en app/layout.js o _app.js.
Ejemplo
import Header from '../components/Header';
import Footer from '../components/Footer';
export default function Layout({ children }) {
return (
<div>
<Header />
<main>{children}</main>
<Footer />
</div>
);
}
Diseño anidado
El diseño anidado permite definir diferentes diseños para diferentes segmentos de ruta.
En el directorio app, cada segmento de ruta puede contener un archivo layout.js.
app/
├── layout.js // 根布局
├── about/
│ ├── layout.js // /about 的布局
│ └── page.js // /about 页面
└── dashboard/
├── layout.js // /dashboard 的布局
└── page.js // /dashboard 页面
Ejemplo
export default function DashboardLayout({ children }) {
return (
<div>
<h1>Dashboard Layout</h1>
{children}
</div>
);
}
Diseño dinámico
El diseño dinámico permite seleccionar dinámicamente un diseño según las condiciones.
Ejemplo
export default function Layout({ children, isDashboard }) {
return (
<div>
{isDashboard ? <DashboardLayout>{children}</DashboardLayout> : <MainLayout>{children}</MainLayout>}
</div>
);
}
Archivos especiales (versión antigua)
Next.js proporciona algunos archivos especiales para definir el diseño global, la estructura del documento y las páginas de error.
_app.js
_app.js es el componente global de Next.js, utilizado para envolver todos los componentes de página.
Ejemplo
import Layout from '../components/Layout';
export default function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
_document.js
_document.js se utiliza para personalizar la estructura del documento HTML.
Ejemplo
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
_error.js
_error.js se utiliza para personalizar las páginas de error.
Ejemplo
export default function Error({ statusCode }) {
return (
<div>
<h1>{statusCode} Error</h1>
<p>Sorry, something went wrong.</p>
</div>
);
}