Organisez ainsi vos composants et mises en page dans votre application Next.js basée sur des pages.

Lors de la création d'une application Next.js, l'organisation efficace de vos composants et de vos mises en page est cruciale pour maintenir une base de code propre et évolutive. Dans cet article de blog, nous examinerons un exemple pratique de structuration de vos composants et mises en page à l’aide d’une approche basée sur les pages, inspirée de la base de code de Supabase.

Comprendre l'approche basée sur les pages

Next.js utilise un répertoire de pages où chaque fichier correspond à une route dans votre application. Cette structure est intuitive, mais à mesure que votre application se développe, il est très important d'organiser les composants et les mises en page de manière à favoriser la réutilisabilité et la clarté.

Exemple : structure de la page de connexion

Regardons un exemple concret en examinant la structure d'un composant SignInPage dans le code source de Supabase.

Nous construisons une plateforme qui enseigne les meilleures pratiques, en nous inspirant de la communauté open source. Donnez-nous une étoile sur Github.

Composants et mises en page : une séparation claire

Remarquez comment les composants et les mises en page sont organisés :

• **components/interfaces/SignIn/SignInForm** : ce répertoire contient le composant SignInForm, spécifiquement lié à l'interface de connexion. En organisant les composants dans un dossier d'interface pertinent, vous vous assurez que les composants associés sont regroupés, ce qui les rend plus faciles à trouver et à gérer.
• **components/layouts/SignInLayout/SignInLayout** : Le composant SignInLayout est séparé dans son propre répertoire de mise en page. Cela permet de conserver la logique de mise en page distincte des composants individuels, vous permettant de réutiliser la mise en page sur différentes pages.
• **lib/constants** : La constante IS_PLATFORM est importée depuis un emplacement centralisé. Il s'agit d'une bonne pratique pour gérer les constantes globales qui peuvent être utilisées sur plusieurs composants.

En fait, le dossier des composants Supabase contient une bonne explication sur cette approche.

Ajout de la mise en page

L'un des points forts de Next.js est sa capacité à définir des mises en page page par page. Le composant SignInPage est enveloppé dans un SignInLayout qui définit la structure globale de la page :

SignInPage.getLayout = (page) => (
  <SignInLayout
    heading="Welcome back"
    subheading="Sign in to your account"
    logoLinkToMarketingSite={true}
  >
    {page}
  </SignInLayout>
)
export default SignInPage

Conclusion

Organiser vos composants et mises en page dans une application Next.js basée sur des pages de cette manière favorise une structure propre et évolutive. En regroupant les composants associés et en séparant la logique de mise en page, vous créez une base de code maintenable et facile à étendre à mesure que votre application se développe.

À propos de nous:

Site Internet : https://thinkthroo.com/

Github : https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)

Créez gratuitement des projets open source à partir de zéro

Laissez votre équipe de développement apprendre les meilleures pratiques

Besoin d'aide pour un projet ? Contactez-nous à thinkthroo@gmail.com

Lectures complémentaires :

1. https://github.com/supabase/supabase/blob/master/apps/studio/pages/sign-in.tsx
2. https://github.com/supabase/supabase/tree/master/apps/studio/components/interfaces
3. https://github.com/supabase/supabase/tree/master/apps/studio/components/layouts
4. https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#per-page-layouts

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!