Introduction
Lorsque l'on débute un nouveau projet, il est facile de se retrouver avec un fichier package.json rempli de dépendances et de configurations complexes. Les bibliothèques sont utiles, mais elles peuvent également apporter du poids et des complexités inutiles. Dans cet article, nous allons explorer quelques patrons légers pour réduire le code et supprimer les dépendances tierces dans les applications Next.js et NestJS.
Contexte Technique
Pour réduire le code, nous allons utiliser des wrappers pour les requêtes API, des fonctions pour convertir les objets JavaScript en FormData et des mappings de chemins pour partager les types entre le front-end et le back-end. Nous allons également utiliser la fonction native Fetch API pour effectuer des requêtes HTTP.
Voici un exemple de wrapper pour les requêtes API :
// lib/api-client.ts
import Cookies from "js-cookie";
const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
export async function clientFetch<T>(
endpoint: string,
options: RequestInit = {},
): Promise<T> {
const token = Cookies.get("token");
const headers: Record<string, string> = {
"Content-Type": "application/json",
...(token && { Authorization: `Bearer ${token}` }),
...(options.headers as Record<string, string>),
};
if (options.body instanceof FormData) {
delete headers["Content-Type"];
}
const response = await fetch(`${baseUrl}${endpoint}`, {
...options,
headers,
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.message);
}
return response.json();
}
Analyse et Implications
En utilisant ces patrons, nous pouvons réduire le code et supprimer les dépendances tierces, ce qui peut améliorer les performances et la sécurité de nos applications. Nous pouvons également utiliser des fonctions pour convertir les objets JavaScript en FormData, ce qui peut simplifier le code et réduire les erreurs.
Voici un exemple de fonction pour convertir les objets JavaScript en FormData :
// utils/helper.ts
export function jsonToFormData(data: any) {
const formData = new FormData();
buildFormData(formData, data);
return formData;
}
function buildFormData(formData: any, data: any, parentKey?: any) {
if (
data &&
typeof data === "object" &&
!(data instanceof Date) &&
!(data instanceof File) &&
!(data instanceof Blob)
) {
Object.keys(data).forEach((key) => {
buildFormData(
formData,
data[key],
parentKey ? `${parentKey}[${key}]` : key,
);
});
} else {
const value = data == null ? "" : data;
formData.append(parentKey, value);
}
}
Perspective
En conclusion, en utilisant des patrons légers et des fonctions natives, nous pouvons réduire le code et supprimer les dépendances tierces dans nos applications Next.js et NestJS. Il est important de surveiller les limites de ces approches et de les adapter en fonction des besoins spécifiques de chaque projet.
