Introduction
Ce portfolio représente un défi personnel où j'ai exploré et maîtrisé des technologies telles que React, Typescript, Next.js, ContentLayer, et Prisma. Il a été conçu non seulement pour mettre en valeur mes compétences techniques mais aussi pour servir d'apprentissage actif à travers la mise en œuvre de ces technologies.
Objectifs du Projet
Le principal objectif de ce portfolio est de démontrer ma capacité à développer une application web complète tout en apprenant et en structurant un projet autour de technologies spécifiques. Ce projet sert également de vitrine pour mes compétences en développement web, en mettant en avant mon travail et mes projets.
Technologies Utilisées
- React & Next.js : Choisies pour leur efficacité dans la construction d'applications web modernes et dynamiques.
- Typescript : Utilisé pour renforcer la sécurité et la maintenabilité du code grâce à son système de types.
- ContentLayer : Employé pour organiser le contenu du site de manière efficace et scalable.
- Prisma : Utilisé pour interagir avec la base de données de manière robuste et typée.
- i18n : Implémenté pour offrir une expérience multilingue, rendant le portfolio accessible à un public plus large.
Configuration et Structure du Projet
Le projet est structuré en utilisant une approche modulaire, où chaque composant est conçu pour être réutilisable et maintenable.
Fonctionnalités Clés
- Changement de langue en temps réel : Permet aux utilisateurs de basculer entre l'anglais et le français, ce qui améliore l'accessibilité et l'engagement.
- UI simple et intuitive : Conçue pour offrir une navigation fluide et une interaction sans friction avec le contenu.
Défis et Solutions
Le principal défi était l'adoption de Typescript pour un projet complet, ce qui nécessitait une compréhension approfondie des types avancés et de leurs implémentations. Ce défi a été relevé grâce à une combinaison de recherche autodidacte et d'échanges avec la communauté en ligne, me permettant de surmonter les obstacles et d'intégrer efficacement Typescript dans le projet.
Gestion Dynamique des Routes et Génération de Pages
J'ai utilisé les fonctions getStaticPaths et getStaticProps de Next.js pour gérer le routage dynamique et la génération de pages statiques, des aspects clés pour un site performant et optimisé pour le SEO. Ces méthodes m'ont permis de pré-générer les pages de chaque projet à la compilation, assurant ainsi des chargements ultra-rapides et une meilleure expérience utilisateur. Voici un extrait du code que j'ai utilisé :
export const getStaticPaths = async () => {
const locales = ['en', 'fr']
let paths = []
for each locale of locales {
const localeProjects = allProjects.filter(project =>
project._raw.sourceFileDir === locale)
const localePaths = localeProjects.map(project => ({
params: { slug: project.slug },
locale,
}))
paths = paths.concat(localePaths)
}
return { paths, fallback: 'blocking' }
}
export const getStaticProps = async ({ locale, params }) => {
const project = allProjects.find(
(p) => p.slug === params.slug && p._raw.sourceFileDir === locale
)
if (!project) {
return { notFound: true }
}
return {
props: {
...(await serverSideTranslations(locale, ['common'])),
project,
},
}
}Réflexions
Ce projet m'a permis d'acquérir une compréhension profonde des technologies front modernes. J'ai appris à internationaliser une application, à utiliser efficacement les hooks React et à gérer des routes dynamiques.
