Next.js App Directory: failipõhine marsruutimise revolutsioon

Next.js on pidevalt nihutanud veebiarenduse piire, pakkudes arendajatele võimsaid tööriistu ja funktsioone jõudluse, skaleeritavuse ja kasutajasõbralike rakenduste loomiseks. App Directory kasutuselevõtt on märkimisväärne samm edasi, eriti selle uuendusliku lähenemisega failipõhisele marsruutimisele. See artikkel süveneb App Directory marsruutimismehhanismi, uurides selle eeliseid, põhimõisteid ja praktilisi mõjusid tänapäevaste veebirakenduste loomisel Next.js-iga.

Next.js-i marsruutimise arengu mõistmine

Enne App Directory't tugines Next.js marsruutimiseks Pages Directory'le. Kuigi see oli tõhus, oli sellel lähenemisel teatud piirangud. Pages Directory kasutas lihtsat failipõhist marsruutimissüsteemi, kus iga fail `pages` kaustas vastas marsruudile. Näiteks `pages/about.js` vastaks marsruudile `/about`.

Kuigi see oli otsekohene, puudus Pages Directory'l sisseehitatud tugi keerukatele paigutustele, andmete pärimise strateegiatele ja serveripoolse renderdamise mustritele, mis nõudis arendajatelt sageli nende funktsioonide käsitsi rakendamist. Lisaks võis andmete pärimise ja komponentide renderdamise tihe sidumine mõnikord põhjustada jõudluse kitsaskohti.

App Directory lahendab need piirangud, tutvustades paindlikumat ja võimsamat marsruutimissüsteemi, mis põhineb Reacti serverikomponentidel, paigutustel ja muudel täiustatud funktsioonidel. See liigub kaugemale lihtsast faili-marsruudi vastavusest ja pakub deklaratiivsemat ja komponeeritavamat lähenemist rakenduste marsruutide ja paigutuste määratlemisele.

App Directory tutvustus: uus paradigma marsruutimiseks

App Directory, mis asub teie Next.js projekti juurkaustas `app` kausta sees, tutvustab põhimõtteliselt erinevat lähenemist marsruutimisele. Selle asemel, et faile otse marsruutidele vastendada, kasutab App Directory konventsioonipõhist süsteemi, kus kataloogide struktuur ja spetsiaalsed failid määravad rakenduse marsruudid.

See lähenemine pakub mitmeid olulisi eeliseid:

Parem organiseeritus: App Directory hierarhiline struktuur soodustab paremat organiseeritust ja koodi hooldatavust. Saate grupeerida seotud komponente ja marsruute loogiliselt alamkataloogidesse.
Parem jõudlus: Reacti serverikomponentide ja täiustatud andmete pärimise võimaluste abil võimaldab App Directory arendajatel optimeerida jõudlust ja vähendada kliendipoolset JavaScripti.
Deklaratiivne marsruutimine: App Directory failipõhine lähenemine võimaldab arendajatel määratleda marsruute ja paigutusi deklaratiivselt, muutes rakenduse struktuuri läbipaistvamaks ja kergemini mõistetavaks.
Sisseehitatud paigutused ja mallid: App Directory pakub sisseehitatud tuge paigutuste ja mallide määratlemiseks, mida jagatakse mitme lehe vahel, vähendades koodi dubleerimist ja parandades järjepidevust.

App Directory marsruutimissüsteemi põhimõisted

App Directory marsruutimissüsteemi tõhusaks kasutamiseks on oluline mõista selle funktsionaalsuse aluseks olevaid põhimõisteid:

1. Marsruudisegmendid ja kaustad

Iga kaust `app` kataloogis esindab marsruudisegmenti. Kausta nimi vastab URL-i tee segmendile. Näiteks `app/blog/posts` kaustastruktuur vastaks marsruudile `/blog/posts`.

Vaatleme seda struktuuri:

app/
  blog/
    posts/
      page.js

See struktuur määratleb marsruudi asukohas `/blog/posts`. Fail `page.js` kaustas `posts` on marsruudisegmendi komponent, mis renderdab selle marsruudi sisu.

2. Fail `page.js`: marsruudi sisu renderdamine

Fail page.js (või page.tsx TypeScripti jaoks) on spetsiaalne fail, mis määratleb konkreetse marsruudisegmendi jaoks renderdatava sisu. See on selle marsruudi sisenemispunkt. See fail peab eksportima Reacti komponendi oma vaikeekspordina.

Näide:

// app/blog/posts/page.js

export default function PostsPage() {
  return (
    <div>
      <h1>Blogipostitused</h1>
      <p>Siin kuvatakse blogipostituste loend.</p>
    </div>
  );
}

3. Paigutused (Layouts): jagatud kasutajaliidese määratlemine

Paigutused võimaldavad teil määratleda kasutajaliidest, mis on jagatud mitme lehe või marsruudisegmendi vahel. Paigutus võib sisaldada elemente nagu päised, jalused, külgribad või muid komponente, mis peaksid olema teie rakenduse teatud osas ühtsed. Paigutused määratletakse failiga `layout.js` (või `layout.tsx`).

Paigutused on pesastatud. See tähendab, et juurpaigutus (`app/layout.js`) ümbritseb kogu rakendust ja pesastatud paigutused ümbritsevad konkreetseid marsruudisegmente. Paigutust jagavate marsruutide vahel navigeerimisel säilitab Next.js paigutuse oleku ja väldib selle uuesti renderdamist, mis parandab jõudlust ja tagab sujuvama kasutajakogemuse.

Näide:

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <nav>
            <a href="/">Avaleht</a> |
            <a href="/blog">Blogi</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>Autoriõigus 2023</p>
        </footer>
      </body>
    </html>
  );
}

Selles näites määratleb `RootLayout` kogu rakenduse põhilise HTML-struktuuri, päise, jaluse ja navigeerimise. Iga leht, mis renderdatakse `app` kataloogis, ümbritsetakse selle paigutusega.

4. Mallid (Templates): oleku säilitamine marsruutide vahel

Sarnaselt paigutustele ümbritsevad ka mallid alamarsruute. Erinevalt paigutustest loovad mallid aga iga alamarsruudi jaoks uue komponendi eksemplari. See tähendab, et malli olekut ei säilitata malli sees olevate marsruutide vahel navigeerimisel. Mallid on kasulikud stsenaariumide puhul, kus peate marsruudi üleminekutel oleku lähtestama või uuesti initsialiseerima. Mallide loomiseks kasutage faili `template.js` (või `template.tsx`).

5. Marsruudigrupid: marsruutide organiseerimine ilma URL-i segmentideta

Marsruudigrupid võimaldavad teil oma marsruute App Directory's organiseerida ilma URL-i struktuuri mõjutamata. Marsruudigrupid määratletakse, ümbritsedes kaustanimed sulgudega, nt `(group-name)`. Need sulud annavad Next.js-ile teada, et kausta tuleb käsitleda loogilise grupeerimismehhanismina, mitte marsruudisegmendina.

See on eriti kasulik suurte, paljude marsruutidega rakenduste organiseerimiseks. Näiteks võite kasutada marsruudigruppe oma rakenduse erinevate osade eraldamiseks, nagu `(marketing)` ja `(app)`. Need grupid mõjutavad ainult failistruktuuri, mitte URL-i teid.

Näide:

app/
  (marketing)/
    home/
      page.js  // Juurdepääsetav aadressil /home
    about/
      page.js  // Juurdepääsetav aadressil /about
  (app)/
    dashboard/
      page.js  // Juurdepääsetav aadressil /dashboard

6. Dünaamilised marsruudid: muutuvate segmentide käsitlemine

Dünaamilised marsruudid võimaldavad teil luua muutuva segmendiga marsruute. See on kasulik stsenaariumide puhul, kus peate genereerima marsruute andmete põhjal, näiteks blogipostituste, tootelehtede või kasutajaprofiilide jaoks. Dünaamilised marsruudisegmendid määratletakse, ümbritsedes segmendi nime nurksulgudega, nt `[id]`. `id` esindab parameetrit, millele pääseb juurde `page.js` komponendi sees.

Näide:

app/
  blog/
    [slug]/
      page.js

Selles näites on `[slug]` dünaamiline marsruudisegment. URL nagu `/blog/my-first-post` vastaks sellele marsruudile ja `slug` parameetri väärtuseks oleks `my-first-post`. Saate `slug` parameetrile juurde pääseda `page.js` komponendis `params` prop'i kaudu.

// app/blog/[slug]/page.js

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blogipostitus: {slug}</h1>
      <p>Blogipostituse sisu slug'iga: {slug}</p>
    </div>
  );
}

Peate genereerima nende dünaamiliste marsruutide võimalikud väärtused. Next.js pakub funktsiooni `generateStaticParams` staatilise saidi genereerimiseks (SSG) ja serveripoolseks renderdamiseks (SSR). See funktsioon võimaldab teil määrata, millised dünaamilised marsruudid tuleks ehitamise ajal eelrenderdada.

// app/blog/[slug]/page.js

export async function generateStaticParams() {
  const posts = [
    { slug: 'my-first-post' },
    { slug: 'my-second-post' },
  ];

  return posts.map((post) => ({ slug: post.slug }));
}

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blogipostitus: {slug}</h1>
      <p>Blogipostituse sisu slug'iga: {slug}</p>
    </div>
  );
}

7. Kõikehõlmavad segmendid (Catch-All): tundmatute marsruutide käsitlemine

Kõikehõlmavad segmendid on dünaamilise marsruudi tüüp, mis võimaldab teil sobitada URL-is suvalise arvu segmente. Need määratletakse, lisades segmendi nime ette kolm punkti, nt `[...path]`. Kõikehõlmavad segmendid on kasulikud paindlike marsruutide loomiseks, mis suudavad käsitleda erinevaid URL-i struktuure.

Näide:

app/
  docs/
    [...path]/
      page.js

Selles näites on `[...path]` kõikehõlmav segment. URL-id nagu `/docs/introduction`, `/docs/api/reference` ja `/docs/examples/basic` vastaksid kõik sellele marsruudile. Parameeter `path` oleks massiiv, mis sisaldab sobitatud segmente.

// app/docs/[...path]/page.js

export default function DocsPage({ params }) {
  const { path } = params;
  return (
    <div>
      <h1>Dokumentatsioon</h1>
      <p>Tee: {path.join('/')}</p>
    </div>
  );
}

8. Paralleelsed marsruudid: mitme lehe samaaegne renderdamine

Paralleelsed marsruudid võimaldavad teil renderdada mitu lehte samaaegselt samas paigutuses. See on eriti kasulik keerukate kasutajaliidese mustrite loomiseks, näiteks mitme paneeliga armatuurlaudade või modaalakende jaoks, mis ilmuvad praeguse lehe peale. Paralleelsed marsruudid määratletakse sümboli @ abil, nt `@children`, `@modal`. Neid saab määrata otse URL-is või navigeerida nende juurde `useRouter` hook'i abil.

Näide:

app/
  @children/
    page.js // Renderdab põhisisu
  @modal/
    login/
      page.js // Renderdab sisselogimise modaalakna

Paralleelsete marsruutide kuvamiseks kasutage komponenti ``.

9. Pealtkuulavad marsruudid (Intercepting): keerukate kasutajaliidese üleminekute loomine

Pealtkuulavad marsruudid võimaldavad teil laadida marsruudi teisest rakenduse osast praeguse marsruudi kontekstis. Seda saab kasutada keerukate kasutajaliidese üleminekute loomiseks, näiteks modaalakna kuvamiseks lingile klõpsates ilma praeguselt lehelt lahkumata. Need määratletakse süntaksiga (...).

Andmete pärimine App Directory's

App Directory tutvustab uusi ja täiustatud viise andmete pärimiseks, kasutades Reacti serverikomponente ja `fetch` API-d koos sisseehitatud vahemälu ja revalideerimise võimalustega. See toob kaasa parema jõudluse ja sujuvama arenduskogemuse. Nii serveri- kui ka kliendikomponendid saavad andmeid pärida, kuid strateegia on erinev.

1. Andmete pärimine serverikomponentides

Serverikomponendid, mis on App Directory's vaikimisi, saavad andmeid pärida otse andmebaasidest või API-dest. Seda tehakse komponendi funktsiooni sees enne renderdamist. Kuna serverikomponendid käivitatakse serveris, saate turvaliselt lisada salajasi võtmeid ja mandaate ilma neid kliendile paljastamata. `fetch` API on automaatselt memoiseeritud, mis tähendab, et identsed andmepäringud deduplitseeritakse, parandades veelgi jõudlust.

// app/page.js

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  // Tagastatud väärtust *ei* serialiseerita
  // Saate tagastada Date, Map, Set jne.

  if (!res.ok) {
    // See aktiveerib lähima `error.js` Error Boundary
    throw new Error('Andmete pärimine ebaõnnestus');
  }

  return res.json();
}

export default async function Page() {
  const data = await getData();

  return <div>{data.title}</div>;
}

2. Andmete pärimine kliendikomponentides

Kliendikomponendid, millele viitab direktiiv 'use client' faili ülaosas, käivitatakse kasutaja brauseris. Andmete pärimine kliendikomponentides hõlmab tavaliselt `useEffect` hook'i ja teegi, nagu `axios` või `fetch` API, kasutamist. Server Actions pakub turvalist viisi serveriandmete muutmiseks kliendikomponentidest. See pakub kliendikomponentidele turvalise viisi serveris olevate andmetega suhtlemiseks ilma API lõpp-punkte otse paljastamata.

// app/components/ClientComponent.js
'use client';

import { useState, useEffect } from 'react';

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const data = await res.json();
      setData(data);
    }

    fetchData();
  }, []);

  if (!data) {
    return <div>Laadimine...</div>;
  }

  return <div>{data.title}</div>;
}

SEO kaalutlused App Directory'ga

App Directory serverikeskne lähenemine pakub olulisi eeliseid SEO jaoks. Kuna sisu renderdatakse serveris, saavad otsingumootorite roomikud lehe sisule kergesti juurde pääseda ja seda indekseerida. Siin on mõned olulised SEO kaalutlused:

Metaandmed: Kasutage oma paigutustes ja lehtedel <head> silti metaandmete, nagu pealkiri, kirjeldus ja märksõnad, määratlemiseks. Next.js pakub sisseehitatud tuge metaandmete haldamiseks `Metadata` API kaudu.
Semantiline HTML: Kasutage semantilisi HTML-elemente (nt <article>, <nav>, <aside>), et oma sisu loogiliselt struktureerida ja pakkuda otsingumootoritele konteksti.
Juurdepääsetavus: Veenduge, et teie rakendus oleks juurdepääsetav puuetega kasutajatele. See hõlmab alternatiivteksti pakkumist piltidele, õige pealkirjade hierarhia kasutamist ja piisava värvikontrasti tagamist.
Jõudlus: Optimeerige oma rakenduse jõudlust, et parandada kasutajakogemust ja otsingumootorite asetusi. See hõlmab kliendipoolse JavaScripti minimeerimist, piltide optimeerimist ja vahemälu kasutamist.

App Directory marsruutimissüsteemi kasutamise eelised

The App Directory's routing system offers a multitude of benefits that enhance the development process, improve application performance, and contribute to a better user experience. Let's explore these advantages in more detail: * **Parem organiseeritus ja hooldatavus:** Failipõhine marsruutimissüsteem soodustab loomupäraselt struktureeritud ja organiseeritud koodibaasi. Marsruutide otsesel vastavusse viimisel kataloogistruktuuriga saavad arendajad hõlpsasti aru URL-ide ja vastavate komponentide vahelisest seosest. See selge struktuur lihtsustab koodibaasis navigeerimist ning muudab rakenduse hooldamise ja uuendamise aja jooksul lihtsamaks. * **Parem jõudlus tänu serverikomponentidele:** App Directory kasutab Reacti serverikomponente sisu renderdamiseks serveris, vähendades JavaScripti hulka, mida on vaja brauseris alla laadida ja käivitada. See toob kaasa kiiremad esialgsed lehe laadimisajad ja parema üldise jõudluse, eriti aeglasema internetiühenduse või vähem võimsate seadmetega kasutajate jaoks. * **Lihtsustatud andmete pärimine ja haldamine:** App Directory lihtsustab andmete pärimist, võimaldades arendajatel andmeid pärida otse serverikomponentides. See kaotab vajaduse keeruka kliendipoolse andmete pärimise loogika järele ja vähendab tundlike andmete kliendile paljastamise riski. * **Deklaratiivne ja intuitiivne marsruutimine:** Failipõhine marsruutimissüsteem pakub deklaratiivset ja intuitiivset viisi rakenduse marsruutide määratlemiseks. Lihtsalt faile ja katalooge luues `app` kaustas saavad arendajad hõlpsasti määratleda oma rakenduse navigeerimise struktuuri ja käitumise. See lähenemine vähendab vajadust keerukate konfiguratsioonifailide järele ja muudab marsruutimissüsteemi lihtsamini mõistetavaks ja kasutatavaks. * **Sisseehitatud paigutused ja mallid ühtse kasutajaliidese jaoks:** App Directory pakub sisseehitatud tuge paigutustele ja mallidele, mis võimaldavad arendajatel määratleda jagatud kasutajaliidese elemente, mis on mitmel lehel ühtsed. See vähendab koodi dubleerimist ja muudab rakenduses ühtse ilme ja tunnetuse säilitamise lihtsamaks. * **Täiustatud marsruutimisfunktsioonid keerukate kasutusjuhtude jaoks:** App Directory pakub mitmeid täiustatud marsruutimisfunktsioone, nagu dünaamilised marsruudid, kõikehõlmavad segmendid, paralleelsed marsruudid ja pealtkuulavad marsruudid. Need funktsioonid võimaldavad arendajatel käsitleda keerukaid marsruutimisstsenaariume ja luua keerukaid kasutajaliidese mustreid, mida oleks traditsiooniliste marsruutimissüsteemidega raske või võimatu saavutada.

Praktilised näited App Directory marsruutimisest

Et illustreerida App Directory marsruutimissüsteemi võimsust ja paindlikkust, vaatleme mõnda praktilist näidet:

1. Lihtsa blogi loomine dünaamiliste marsruutidega

Kujutage ette blogirakendust, kus igal blogipostitusel on oma unikaalne URL, mis põhineb selle slug'il. App Directory'ga saab seda hõlpsasti rakendada dünaamiliste marsruutide abil: ``` app/ blog/ [slug]/ page.js ``` Kaust `[slug]` esindab dünaamilist marsruudisegmenti, mis sobib mis tahes URL-iga tee `/blog/` all. Fail `page.js` kaustas `[slug]` renderdab vastava blogipostituse sisu. ```javascript // app/blog/[slug]/page.js export async function generateStaticParams() { // Pärige kõik blogipostitused andmebaasist või API-st const posts = await fetchPosts(); // Vastendage postitused slug'i parameetrite massiiviks return posts.map((post) => ({ slug: post.slug })); } export default async function BlogPost({ params }) { const { slug } = params; // Pärige blogipostitus vastava slug'iga const post = await fetchPost(slug); if (!post) { return <div>Postitust ei leitud</div>; } return ( <article> <h1>{post.title}</h1> <p>{post.content}</p> </article> ); } ``` See näide demonstreerib, kuidas kasutada dünaamilisi marsruute, et luua igale blogipostitusele individuaalsed lehed lihtsal ja tõhusal viisil.

2. Modaalakna rakendamine pealtkuulavate marsruutidega

Oletame, et soovite rakendada modaalakent, mis ilmub, kui kasutaja klõpsab lingile, ilma praeguselt lehelt lahkumata. Seda saab saavutada pealtkuulavate marsruutide abil: ``` app/ (.)photos/ [id]/ @modal/ page.js page.js ``` Siin kuulab `(.)photos/[id]/@modal/page.js` pealt päringuid, mis lähevad aadressile `photos/[id]` praeguselt lehelt. Kui kasutaja klõpsab lingile konkreetse foto juurde, ilmub modaalaken praeguse lehe peale, selle asemel, et navigeerida uuele lehele.

3. Armatuurlaua paigutuse loomine paralleelsete marsruutidega

Kujutage ette, et ehitate armatuurlaua rakendust mitme paneeliga, mida tuleb samaaegselt renderdada. Selle paigutuse saavutamiseks saab kasutada paralleelseid marsruute: ``` app/ @analytics/ page.js // Analüütika armatuurlaud @settings/ page.js // Seadete paneel page.js // Peamine armatuurlaua paigutus ```

Selles struktuuris esindavad `@analytics` ja `@settings` paralleelseid marsruute, mis renderdatakse peamises armatuurlaua paigutuses. Igal paralleelsel marsruudil on oma page.js fail, mis määratleb selle paneeli sisu. Paigutus saab otsustada, kuhu need paigutada, kasutades komponenti <Slot>.

Pages Directory'st App Directory'sse migreerimine

Olemasoleva Next.js rakenduse migreerimine Pages Directory'st App Directory'sse nõuab hoolikat planeerimist ja teostust. Kuigi App Directory pakub olulisi eeliseid, tutvustab see ka uusi kontseptsioone ja mustreid, mida arendajad peavad mõistma. Siin on samm-sammuline juhend, mis aitab teid migratsiooniprotsessis:

Mõistke põhilisi erinevusi: Enne migratsiooni alustamist veenduge, et mõistate põhjalikult Pages Directory ja App Directory peamisi erinevusi, sealhulgas marsruutimissüsteemi, andmete pärimist ja komponentide arhitektuuri.
Looge `app` kaust: Looge oma Next.js projekti juurkausta uus kataloog nimega `app`. Selles kataloogis hakkavad asuma kõik App Directory'sse kuuluvad komponendid ja marsruudid.
Migreerige marsruudid järk-järgult: Alustage marsruutide migreerimisega järk-järgult, ükshaaval. See võimaldab teil iga marsruuti eraldi testida ja siluda, minimeerides vigade tekkimise riski.
Teisendage komponendid serverikomponentideks: Teisendage oma olemasolevad Reacti komponendid võimaluse korral serverikomponentideks. See parandab jõudlust ja vähendab JavaScripti hulka, mida on vaja brauseris alla laadida ja käivitada.
Uuendage andmete pärimise loogikat: Uuendage oma andmete pärimise loogikat, et kasutada ära App Directory sisseehitatud andmete pärimise võimalusi. See võib hõlmata andmete pärimise koodi teisaldamist kliendikomponentidest serverikomponentidesse.
Rakendage paigutused ja mallid: Rakendage paigutused ja mallid, et määratleda jagatud kasutajaliidese elemente, mis on mitmel lehel ühtsed.
Testige põhjalikult: Testige iga migreeritud marsruuti põhjalikult, et veenduda, et see toimib õigesti ja et regressioone ei esine.
Eemaldage `pages` kaust: Kui kõik marsruudid on migreeritud, saate eemaldada `/pages` kausta.

Kokkuvõte

Next.js App Directory esindab olulist arengut failipõhises marsruutimises, pakkudes arendajatele organiseeritumat, jõudluslikumat ja paindlikumat viisi kaasaegsete veebirakenduste loomiseks. Mõistes põhimõisteid ja võttes omaks uued funktsioonid, saavad arendajad kasutada App Directory't erakordsete kasutajakogemuste loomiseks ja suurema tootlikkuse saavutamiseks. Next.js arenduse tulevik peitub App Directory's ja selle kasutuselevõtt on strateegiline samm tipptasemel veebirakenduste ehitamiseks. See on võimas tööriist arendajatele kogu maailmas.

Kuna Next.js ökosüsteem areneb edasi, on App Directory'st saamas standard robustsete, skaleeritavate ja jõudluslike veebirakenduste ehitamiseks. Võtke muutus omaks, uurige võimalusi ja avage Next.js'i täielik potentsiaal!