Atrás quedaron los días en que tenía que crear un backend separado para su sitio web. Con el enrutamiento de API basado en archivos de Next.js, puede facilitarle la vida al escribir su API dentro de un proyecto de Next.js.
Next.js es un metamarco de React con funciones que simplifican el proceso de creación de aplicaciones web listas para producción. Verá cómo crear una API REST en Next.js y consumir los datos de esa API en una página de Next.js.
Cree un proyecto Next.js usando create-next-app
Puede crear un nuevo proyecto Next.js con la herramienta CLI create-next-app. Instala los paquetes y archivos necesarios para que pueda comenzar a crear una aplicación Next.js.
Ejecute este comando en una terminal para crear una nueva carpeta Next.js llamada api-routes. Es posible que reciba un aviso para instalar create-next-app.
npx crear-próximo-app api-rutas
Cuando finalice el comando, abra la carpeta api-routes para comenzar a crear las rutas API.
Enrutamiento de API en Next.js
Las rutas de API se ejecutan en el servidor y tienen muchos usos, como guardar datos de usuario en una base de datos o obtener datos de una API sin aumentar la
Error de política de CORS.En Next.js, debe crear rutas API dentro de la carpeta /pages/api. Next.js genera puntos finales de API para cada uno de los archivos de esta carpeta. Si agrega user.js a /pages/api, Next.js creará un punto final en http://localhost: 3000/api/usuario.
Una ruta API básica de Next.js tiene la siguiente sintaxis.
exportarpor defectofunciónmanipulador(requerimiento, res) {
res.status (200).json({ nombre: 'Juan Pérez' })
}
Debe exportar la función del controlador para que funcione.
Creación de rutas API
Cree un nuevo archivo llamado todo.js en el /pages/api carpeta para agregar una ruta API para elementos de tareas pendientes.
Burlándose de la base de datos Todo
Para obtener todos, debe crear un punto final GET. Por simplicidad. Este tutorial utiliza una matriz de tareas pendientes en lugar de una base de datos, pero no dude en utilizar una base de datos como MongoDB o MySQL.
Cree los elementos de tareas pendientes en todo.js en la carpeta raíz de su aplicación y luego agregue los siguientes datos.
exportarconstante todos = [
{
identificación: 1,
hacer: "Hacer algo bueno por alguien que me importa",
terminado: verdadero,
ID de usuario: 26,
},
{
identificación: 2,
hacer: "Memoriza los cincuenta estados y sus capitales",
terminado: FALSO,
ID de usuario: 48,
},
// otros todos
];
Estos elementos de tareas pendientes son del sitio web DummyJSON, un API REST para datos simulados. Puede encontrar los datos exactos de este DummyJSON punto final de todos.
A continuación, cree la ruta API en /pages/api/todos.js y agregue la función de controlador.
importar { todos } de "../../hacer";exportarfunciónmanipulador(requerimiento, res) {
constante {método} = req;
cambiar (método) {
caso "CONSEGUIR":
resolución.estado(200).json(todos);
romper;
caso "CORREO":
constante { todo, completado } = req.cuerpo;
todos.empujar({
identificación: todos.longitud + 1,
hacer,
terminado,
});
resolución.estado(200).json(todos);
romper;
por defecto:
res.setHeader("Permitir", ["CONSEGUIR", "CORREO"]);
res.status(405).fin(`Método ${método} No Permitido`);
romper;
}
}
Esta ruta maneja los puntos finales GET y POST. Devuelve todas las tareas pendientes para la solicitud GET y agrega un elemento de tareas pendientes a la base de datos de tareas pendientes para una solicitud POST. Para otros métodos, el controlador devuelve un error.
Consumo de rutas API en el frontend
Ha creado un punto final de API que devuelve un objeto JSON que contiene una matriz de todos.
Para consumir la API, cree una función llamada fetchTodos que recupere datos del extremo de la API. La función utiliza el método de búsqueda, pero también puede use Axios para hacer solicitudes de API. Luego llame a esta función cuando haga clic en un botón.
importar Cabeza de "siguiente/cabeza";
importar { estado de uso } de "reaccionar";exportarpor defectofunciónHogar() {
constante [todos, settodos] = useState([]);constante buscarTodos = asíncrono () => {
constante respuesta = esperar buscar("/api/todos");
constante datos = esperar respuesta.json();
settodos (datos);
};
devolver (
<div className={estilos.contenedor}>
<Cabeza>
<título>Crear la siguiente aplicación</title>
<metanombre="descripción" contenido="Generado por crear la siguiente aplicación" />
<enlace rel="icono" href="/favicon.ico" />
</Head>
<principal>
<botón onClick={buscarTodos}>Obtener todos</button>
<ul>
{todos.mapa((todo) => {
devolver (
<li
estilo={{ color: `${todo.completado? "verde": "rojo"}` }}
clave={todo.id}
>
{todo.todo}:{todo.completado}.
</li>
);
})}
</ul>
</main>
</div>
);
}
La lista de este fragmento muestra los elementos pendientes cuando se recuperan.
Para el extremo POST, cree una nueva función llamada saveTodo que realice una solicitud POST a la API. La solicitud de recuperación almacena el nuevo elemento pendiente en el cuerpo y devuelve todos los elementos pendientes, incluido el nuevo. La función saveTodo luego los almacena en el estado de todos.
constante guardarTodo = asíncrono () => {
constante respuesta = esperar buscar("/api/todos", {
método: "CORREO",
cuerpo: JSON.stringify (nuevo Todo),
encabezados: {
"Tipo de contenido": "aplicación/json",
},
});
constante datos = esperar respuesta.json();
settodos (datos);
};
Luego, cree un formulario con una barra de entrada de texto para recibir el nuevo elemento pendiente. La función de controlador de envío de este formulario llamará a la función saveTodo.
importar Cabeza de "siguiente/cabeza";
importar { usarReductor, usarEstado } de "reaccionar";
importar estilos de "../estilos/Home.module.css";exportarpor defectofunciónHogar() {
constante [todos, settodos] = useState([]);constante [newTodo, setnewTodo] = useState({
hacer: "",
terminado: FALSO,
});constante buscarTodos = asíncrono () => {
// buscarTodos
};
constante guardarTodo = asíncrono (e) => {
constante respuesta = esperar buscar("/api/todos", {
método: "CORREO",
cuerpo: JSON.stringify (nuevo Todo),
encabezados: {
"Tipo de contenido": "aplicación/json",
},
});constante datos = esperar respuesta.json();
settodos (datos);
};constante manejarCambio = (e) => {
establecernuevoTodo({
hacer: mi.objetivo.valor,
});
};constante handleSubmit = (e) => {
mi.preventDefault();
guardarTodo();
establecernuevoTodo({
hacer: '',
});
};devolver (
<div className={estilos.contenedor}>
<Cabeza>
<título>Crear la siguiente aplicación</title>
<metanombre="descripción" contenido="Generado por crear la siguiente aplicación" />
<enlace rel="icono" href="/favicon.ico" />
</Head>
<principal>
// Obtiene los elementos pendientes cuando se hace clic
<botón onClick={buscarTodos}>Obtener todos</button>
// Guarda un nuevo elemento pendiente cuando se envía
<formulario onSubmit={handleSubmit}>
<tipo de entrada ="texto" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// lista de tareas pendientes}
</ul>
</main>
</div>
);
}
El controlador agrega una nueva tarea pendiente a la base de datos cada vez que un usuario envía el formulario. Además, esta función actualiza el valor de todos utilizando los datos recibidos de la API que, a su vez, agrega el nuevo elemento de tareas pendientes a la lista.
El enrutamiento API es solo uno de los puntos fuertes de Next.js
Ha visto cómo crea y usa una ruta API Next.js. Ahora puede crear una aplicación de pila completa sin salir de su carpeta de proyecto Next.js. El enrutamiento de API es uno de los muchos beneficios que proporciona Next.js.
Next.js también ofrece optimizaciones de rendimiento, como división de código, carga diferida y compatibilidad con CSS integrada. Si está creando un sitio web que debe ser rápido y compatible con SEO, debe considerar Next.js.