Démêler les groupes de routes et les mises en page basés sur des fichiers, dynamiques / Blogs / Perficient

Qu’est-ce que le routage ?

Le Pages Router utilise un système de routage basé sur un système de fichiers fondé sur le concept de pages. Lors de l’ajout d’un fichier au répertoire de l’application, il devient facilement accessible sous forme d’itinéraire.

Routage basé sur des fichiers :

Chaque composant du répertoire de l’application devient automatiquement une route dans votre application.

Si vous avez un fichier nommé page.js à l’intérieur de à propos dossier dans le application répertoire, il serait accessible au /à propos itinéraire.

Chemin: src/app/about/page.js

export default function About() {
    return <h1>About</h1>
}

Sortir:

Chemin: src/app/profile/page.js

export default function Profile() {
    return <h1>Profile</h1>
}

Sortir:

Que sont les itinéraires dynamiques ?

Les itinéraires dynamiques dans Next.js vous permettent de créer des pages Web avec des parties variables dans l’URL. Utiliser des parenthèses ‘[]’, vous pouvez définir ces segments dynamiques, permettant à vos pages de s’adapter à différentes entrées ou paramètres, rendant votre application plus polyvalente.

Structure des dossiers :

• Je récupère les données de la liste de produits à l’aide de la récupération côté client.
• Le routage dynamique dans Next.js vous permet de créer des pages avec des paramètres dynamiques. Dans ce cas, le paramètre est ID de l’article.
• Le Le composant de Next.js est utilisé pour la navigation côté client. Lorsqu’un utilisateur clique sur le titre d’un produit, il sera redirigé vers la page produit générée dynamiquement.

Chemin: src/app/productlist/page.js

"use client"
import Link from 'next/link'
import { useState, useEffect } from 'react';

const ProductList = () => {

    const [product, setProduct] = useState([]);

    useEffect(() => {
        getAsync();
    }, []);

    const getAsync = async () => {
        let data = await fetch("https://dummyjson.com/products")
        data = await data.json();
        console.log(data);
        setProduct(data.products);
    };

    return (
        <>
            <h1>Product List</h1>
            <ul>
                {product.map((item) => (
                    <li key={item.id}>
                        <Link href={`/productlist/${item.id}`}>
                            {item.title}
                        </Link>
                       
                    </li>
                ))}
            </ul>
        </>

    );
}
export default ProductList;

Chemin: src/app/productlist/[Id]/page.js

import React from 'react'
const page = () => {
  return (
    <>
      <h3>As you can see the URL is dynamically changing</h3>
    </>
  )
}

export default page

Sortir:

• Lorsque vous cliquez sur un titre, vous accédez à une page spéciale concernant ce titre.
• Le lien est unique pour chaque titre, donc si vous cliquez sur le premier titre, il mène vers une page avec l’ID 1, et pour le deuxième titre, il mène vers une page avec l’ID 2.
• Cela se fait en douceur grâce au routage dynamique Next.js, qui aide le site Web à s’adapter à différents titres sans trop de tracas.

Sortir:

Comprenons le groupe Routes

Tout d’abord, nous saisirons la structure fondamentale de Next.js, puis nous approfondirons les concepts de groupes de routes.

Structure des dossiers :

Si vous regardez la configuration de mon dossier, cela ressemble à ceci : Auth/LoggedIn/SignOut/SignUp dans Next.js. Ainsi, pour accéder à différentes pages, vous trouverez « LoggedIn » sous « Auth/LoggedIn », « SignOut » sous « Auth/SignOut » et « SignUp » sous « Auth/SignUp ».

Qu’est-ce que Groupe d’itinéraires ?

Avez-vous déjà remarqué à quel point les dossiers de votre ordinateur organisent soigneusement les fichiers ? Les sites Web fonctionnent de la même manière, mais ce que les utilisateurs voient dans l’adresse d’un site Web ne correspond pas toujours à ce qui se trouve en coulisses. Entrez Route Groups dans Next.js, la magie qui nettoie l’adresse d’un site Web sans changer sa structure !

Groupes de routage : garder votre adresse Web bien rangée

• En règle générale, les dossiers de sites Web correspondent à des parties de l’adresse du site. Mais avec les groupes de routes, vous avez le contrôle. Vous pouvez décider quels dossiers restent cachés de l’adresse du site Web tout en gardant votre projet organisé en coulisses.
• Par exemple, imaginez un dossier appelé « Auth » contenant des éléments liés à la connexion. En utilisant les groupes de routes, vous pouvez accéder directement à des pages telles que « LoggedIn », « SignOut » ou « SignUp » sans afficher toute la structure des dossiers dans l’URL. C’est comme avoir un passage secret vers des pages spécifiques, rendant l’adresse du site Web plus claire et plus facile pour les utilisateurs.
• Cela signifie qu’en plaçant le dossier principal « Auth » entre parenthèses, il devient masqué dans la structure de l’URL. De ce fait, vous pouvez accéder à l’URL sans avoir à inclure ou afficher le dossier « Auth » dans le chemin.

Chemin: src/app/Auth/LoggedIn/page.js

const LogIn = () => {
   return(
    <h1>LoggedIn Page</h1>
   )
}
export default LogIn;

Sortir:

Chemin: src/app/Auth/SignOut/page.js

const SignOut = () => {
    return(
        <h1>SignOut Page</h1>
    )
}
export default SignOut

Sortir:

Chemin: src/app/Auth/SignUp/page.js

const SignUp = () => {
    return(
        <h1>SignUp Page</h1>
    )
}
export default SignUp

Sortir:

• Avec les groupes de routes dans Next.js, vous avez la possibilité d’accéder directement à la page « Connecté » sans afficher la structure complète des dossiers dans l’adresse du site Web. Alors, au lieu de devoir passer par « Authentification/Connexion » dans la structure des dossiers pour accéder à la page, vous pouvez la configurer pour que les utilisateurs accèdent au « Connecté » page simplement en tapant son chemin désigné, ce qui rend l’URL plus propre et plus simple pour les utilisateurs.
• Cela ne change pas la façon dont vos dossiers sont organisés en interne ; cela affecte simplement ce que les utilisateurs voient dans la barre d’adresse de leur navigateur.
• De même, vous pouvez accéder aux pages « SignOut » et « SignUp » sans avoir besoin d’inclure le dossier « auth » dans le chemin.

Qu’est-ce que la disposition racine ?

• Une mise en page racine dans Next.js est comme un cadre qui entoure tout sur votre site Web. Il définit les éléments de base pour toutes les pages, comme la langue et les styles.
• En termes plus simples, le code que vous avez fourni crée une structure de base (le RootLayout) qui enveloppe tout le contenu de votre site Web. Cette structure définit les paramètres et styles de base pour chaque page, tels que la langue du site Web (comme l’anglais) et un style de police spécifique pour le texte.
• La section des métadonnées contient des informations importantes sur la page Web, telles que son titre et sa description, qui sont utilisées par les moteurs de recherche et les navigateurs.
• Fondamentalement, la fonction Root Layout permet de maintenir l’apparence et le comportement cohérents sur toutes les pages de votre site Web Next.js.

Chemin: src/app.layout.js

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })
export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
// export default function RootLayout({ children, sidebar, main }) {
export default function RootLayout({ children }) {
  const boolean = true;
  return (
    <html lang="en">
      <body className={inter.className}>
          {children}
      </body>
    </html>
  )
}

Qu’est-ce que la mise en page ?

• Lorsque vous visitez différentes pages d’un site Web, vous vous attendez à ce qu’elles se ressemblent, n’est-ce pas ? C’est comme avoir la même barre supérieure ou le même menu. Eh bien, dans Next.js (un moyen de créer des sites Web), il y a ce qu’on appelle une « mise en page ».
• Une mise en page est comme un plan qui indique à quoi doivent ressembler toutes les pages. C’est très pratique car au lieu de copier le même design pour chaque page, vous créez une mise en page avec des éléments tels que des en-têtes, des pieds de page et des menus que vous souhaitez sur chaque page.
• Par exemple, pensez à un dossier pour vous connecter à un site Web. Dans ce dossier, il peut y avoir un fichier spécial appelé « layout.js ». Ce fichier fait office de patron, décidant de l’apparence de toutes les pages de connexion.

Structure des dossiers :

• Désormais, dans ce dossier de connexion, vous pouvez trouver des dossiers séparés pour des éléments tels que « LoginStudent » et « LoginTeacher ». Chacun de ces dossiers comporte des pages pour ces actions spécifiques.
• Ce fichier « layout.js » est crucial car il définit les règles d’apparition de toutes ces pages dans la section de connexion. Cela garantit qu’ils ont tous le même style, comme le même en-tête ou le même menu, pour rendre les choses fluides et cohérentes.

Chemin: src/app/Connexion/layout.js

"use client"
import Link from "next/link";
import './Style/Login.css'
import { usePathname } from "next/navigation";
const Layout = ({ children }) => {
    const pathName = usePathname()
    console.log(pathName);
    return (
        <>
                <ul className="login-nav">
                    <li><h4>Login Navbar</h4></li>
                    <li><Link href="https://blogs.perficient.com/Login">Login Page</Link></li>
                    <li><Link href="http://blogs.perficient.com/Login/LoginStudent">Login Student Page</Link></li>
                    <li><Link href="http://blogs.perficient.com/Login/LoginTeacher">Login Teacher Page</Link></li>
                </ul> 
            {children}

        </>
    )
}
export default Layout

Chemin: src/app/Connexion/page.js

import Link from "next/link";
const page = () => {
  return (
    <div>
      <h3>login Page</h3>
      <Link href="https://blogs.perficient.com/">Go to Home Page</Link>
    </div>
  )
}

export default page

Sortir:

Chemin: src/app/Login/LoginStudent/page.js

"use client"
import { useRouter } from "next/navigation"
const page = () => {
    const router = useRouter();
    const navigate = (name) => {
        router.push("https://blogs.perficient.com/Login" + name);
    }
    return (
        <div>
            <h3>Login Student Page</h3>
            <button onClick={() => 
                  navigate ("/LoginTeacher")}>
                Go to Login Teacher Page</button>
        </div>
    )
}

export default page

Sortir:

Chemin: src/app/Login/LoginTeacher/page.js

const page = ()=> {
  return (
    <div>
      <h3>Login Teacher Page</h3>
    </div>
  )
}

export default page

Sortir:

• En utilisant des mises en page comme celle-ci, les créateurs de sites Web peuvent s’assurer que, quelle que soit la page de connexion sur laquelle vous vous trouvez, elles se ressemblent toutes. C’est comme donner à chaque page une ambiance similaire, ce qui vous facilite la navigation et l’utilisation du site.
• En termes simples, les mises en page dans Next.js sont comme les capitaines qui garantissent que toutes les pages d’une section d’un site Web ont la même apparence.

Si j’ouvre la page « À propos », la barre de navigation de « layout.js » n’y apparaîtra pas. Puisqu’il est conçu pour le dossier de connexion, il n’apparaît que sur les pages qui y sont directement connectées.

Chemin: src/app/about/page.js

const page = ()=> {
    return (
      <div>
        <h1>About Page</h1>
      </div>
    )
  }
  export default page

Sortir:

Conclusion:

Le blog conclut que la compréhension des concepts de routage Next.js, notamment le routage basé sur des fichiers, les itinéraires dynamiques, les groupes de routage, les mises en page racine et les mises en page, est cruciale pour créer des sites Web propres, organisés et conviviaux. Des exemples pratiques illustrent l’impact de ces concepts sur la structure, la cohérence et la navigation des URL.