Next.js App direktorijs: uz failiem balstītas maršrutēšanas revolūcija

Next.js ir pastāvīgi paplašinājis tīmekļa izstrādes robežas, piedāvājot izstrādātājiem jaudīgus rīkus un funkcijas, lai veidotu veiktspējīgas, mērogojamas un lietotājam draudzīgas lietotnes. App direktorija ieviešana ir nozīmīgs solis uz priekšu, īpaši ar tā inovatīvo pieeju uz failiem balstītai maršrutēšanai. Šis raksts dziļi iedziļinās App direktorija maršrutēšanas mehānismā, izpētot tā priekšrocības, galvenos jēdzienus un praktisko ietekmi uz modernu tīmekļa lietotņu veidošanu ar Next.js.

Izpratne par maršrutēšanas evolūciju Next.js

Pirms App direktorija Next.js maršrutēšanai izmantoja Pages direktoriju. Lai gan šī pieeja bija efektīva, tai bija noteikti ierobežojumi. Pages direktorijs izmantoja vienkāršu, uz failiem balstītu maršrutēšanas sistēmu, kur katrs fails `pages` direktorijā atbilda maršrutam. Piemēram, `pages/about.js` tiktu kartēts uz `/about` maršrutu.

Lai gan Pages direktorijs bija vienkāršs, tam trūka iebūvēta atbalsta sarežģītiem izkārtojumiem, datu ieneses stratēģijām un servera puses renderēšanas modeļiem, bieži liekot izstrādātājiem šīs funkcijas ieviest manuāli. Turklāt ciešā datu ieneses un komponenšu renderēšanas saikne dažkārt varēja radīt veiktspējas problēmas.

App direktorijs risina šos ierobežojumus, ieviešot elastīgāku un jaudīgāku maršrutēšanas sistēmu, kas balstīta uz React Servera komponentēm, izkārtojumiem un citām progresīvām funkcijām. Tas pārsniedz vienkāršu faila un maršruta kartēšanu un piedāvā deklaratīvāku un komponējamāku pieeju lietotnes maršrutu un izkārtojumu definēšanai.

Iepazīstinām ar App direktoriju: jauna paradigma maršrutēšanai

App direktorijs, kas atrodas jūsu Next.js projekta saknē mapē `app`, ievieš fundamentāli atšķirīgu pieeju maršrutēšanai. Tā vietā, lai tieši kartētu failus uz maršrutiem, App direktorijs izmanto uz konvencijām balstītu sistēmu, kur direktoriju struktūra un īpašie faili nosaka lietotnes maršrutus.

Šī pieeja piedāvā vairākas galvenās priekšrocības:

Uzlabota organizācija: App direktorija hierarhiskā struktūra veicina labāku organizāciju un koda uzturēšanu. Jūs varat loģiski grupēt saistītās komponentes un maršrutus apakšdirektorijos.
Uzlabota veiktspēja: Izmantojot React Servera komponentes un progresīvas datu ieneses iespējas, App direktorijs ļauj izstrādātājiem optimizēt veiktspēju un samazināt klienta puses JavaScript.
Deklaratīva maršrutēšana: App direktorija uz failiem balstītā pieeja ļauj izstrādātājiem deklaratīvi definēt maršrutus un izkārtojumus, padarot lietotnes struktūru caurspīdīgāku un vieglāk saprotamu.
Iebūvēti izkārtojumi un veidnes: App direktorijs nodrošina iebūvētu atbalstu izkārtojumu un veidņu definēšanai, kas tiek koplietoti starp vairākām lapām, samazinot koda dublēšanos un uzlabojot konsekvenci.

Galvenie jēdzieni App direktorija maršrutēšanas sistēmā

Lai efektīvi izmantotu App direktorija maršrutēšanas sistēmu, ir būtiski izprast galvenos jēdzienus, kas ir tās funkcionalitātes pamatā:

1. Maršrutu segmenti un mapes

Katra mape `app` direktorijā pārstāv maršruta segmentu. Mapes nosaukums atbilst URL ceļa segmentam. Piemēram, `app/blog/posts` mapju struktūra atbilstu maršrutam `/blog/posts`.

Apsveriet šādu struktūru:

app/
  blog/
    posts/
      page.js

Šī struktūra definē maršrutu `/blog/posts`. Fails `page.js` mapē `posts` ir maršruta segmenta komponente, kas renderē saturu šim maršrutam.

2. Fails `page.js`: maršruta satura renderēšana

Fails page.js (vai page.tsx TypeScript gadījumā) ir īpašs fails, kas definē saturu, kurš jārenderē konkrētam maršruta segmentam. Tas ir šī maršruta ieejas punkts. Šim failam ir jāeksportē React komponente kā noklusējuma eksports.

Piemērs:

// app/blog/posts/page.js

export default function PostsPage() {
  return (
    <div>
      <h1>Emuāra ieraksti</h1>
      <p>Šeit tiks parādīts emuāra ierakstu saraksts.</p>
    </div>
  );
}

3. Izkārtojumi: koplietotas lietotāja saskarnes definēšana

Izkārtojumi ļauj definēt lietotāja saskarni, kas tiek koplietota starp vairākām lapām vai maršruta segmentiem. Izkārtojums var saturēt tādus elementus kā galvenes, kājenes, sānjoslas vai jebkuras citas komponentes, kurām jābūt konsekventām visā jūsu lietotnes sadaļā. Izkārtojumi tiek definēti, izmantojot failu `layout.js` (vai `layout.tsx`).

Izkārtojumi ir ligzdoti. Tas nozīmē, ka saknes izkārtojums (`app/layout.js`) aptver visu lietotni, un ligzdotie izkārtojumi aptver konkrētus maršruta segmentus. Pārvietojoties starp maršrutiem, kuriem ir kopīgs izkārtojums, Next.js saglabā izkārtojuma stāvokli un izvairās no tā atkārtotas renderēšanas, tādējādi uzlabojot veiktspēju un nodrošinot vienmērīgāku lietotāja pieredzi.

Piemērs:

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <nav>
            <a href="/">Sākums</a> |
            <a href="/blog">Emuārs</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>Autortiesības 2023</p>
        </footer>
      </body>
    </html>
  );
}

Šajā piemērā `RootLayout` definē pamata HTML struktūru, galveni, kājeni un navigāciju visai lietotnei. Jebkura lapa, kas renderēta `app` direktorijā, tiks ietverta šajā izkārtojumā.

4. Veidnes: stāvokļa saglabāšana starp maršrutiem

Līdzīgi kā izkārtojumi, arī veidnes aptver bērnu maršrutus. Tomēr atšķirībā no izkārtojumiem, veidnes katram bērnu maršrutam izveido jaunu komponentes instanci. Tas nozīmē, ka veidnes stāvoklis netiek saglabāts, pārvietojoties starp maršrutiem veidnes ietvaros. Veidnes ir noderīgas gadījumos, kad nepieciešams atiestatīt vai atkārtoti inicializēt stāvokli maršruta pārejās. Veidņu izveidei izmantojiet template.js (vai template.tsx).

5. Maršrutu grupas: maršrutu organizēšana bez URL segmentiem

Maršrutu grupas ļauj organizēt maršrutus App direktorijā, neietekmējot URL struktūru. Maršrutu grupas tiek definētas, ietverot mapju nosaukumus iekavās, piemēram, `(group-name)`. Šīs iekavas norāda Next.js, ka mape jāuztver kā loģisks grupēšanas mehānisms, nevis maršruta segments.

Tas ir īpaši noderīgi, organizējot lielas lietotnes ar daudziem maršrutiem. Piemēram, jūs varētu izmantot maršrutu grupas, lai atdalītu dažādas lietotnes sadaļas, piemēram, `(marketing)` un `(app)`. Šīs grupas ietekmē tikai failu struktūru, nevis URL ceļus.

Piemērs:

app/
  (marketing)/
    home/
      page.js  // Pieejams vietnē /home
    about/
      page.js  // Pieejams vietnē /about
  (app)/
    dashboard/
      page.js  // Pieejams vietnē /dashboard

6. Dinamiskie maršruti: mainīgo segmentu apstrāde

Dinamiskie maršruti ļauj izveidot maršrutus ar mainīgiem segmentiem. Tas ir noderīgi gadījumos, kad nepieciešams ģenerēt maršrutus, pamatojoties uz datiem, piemēram, emuāra ierakstiem, produktu lapām vai lietotāju profiliem. Dinamiskie maršrutu segmenti tiek definēti, ietverot segmenta nosaukumu kvadrātiekavās, piemēram, `[id]`. `id` apzīmē parametru, kuram var piekļūt `page.js` komponentē.

Piemērs:

app/
  blog/
    [slug]/
      page.js

Šajā piemērā `[slug]` ir dinamisks maršruta segments. URL, piemēram, `/blog/my-first-post`, atbilstu šim maršrutam, un `slug` parametrs tiktu iestatīts uz `my-first-post`. Jūs varat piekļūt `slug` parametram `page.js` komponentē, izmantojot `params` rekvizītu.

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

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Emuāra ieraksts: {slug}</h1>
      <p>Emuāra ieraksta saturs ar īsvārdu: {slug}</p>
    </div>
  );
}

Jums ir jāģenerē iespējamās vērtības šiem dinamiskajiem maršrutiem. Next.js nodrošina funkciju `generateStaticParams` statiskās vietnes ģenerēšanai (SSG) un servera puses renderēšanai (SSR). Šī funkcija ļauj norādīt, kuri dinamiskie maršruti ir jārenderē iepriekš būvēšanas laikā.

// 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>Emuāra ieraksts: {slug}</h1>
      <p>Emuāra ieraksta saturs ar īsvārdu: {slug}</p>
    </div>
  );
}

7. Visu tverošie segmenti: nezināmu maršrutu apstrāde

Visu tverošie segmenti ir dinamisku maršrutu veids, kas ļauj saskaņot jebkuru segmentu skaitu URL. Tie tiek definēti, pirms segmenta nosaukuma pievienojot trīs punktus, piemēram, `[...path]`. Visu tverošie segmenti ir noderīgi, lai izveidotu elastīgus maršrutus, kas var apstrādāt dažādas URL struktūras.

Piemērs:

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

Šajā piemērā `[...path]` ir visu tverošs segments. URL, piemēram, `/docs/introduction`, `/docs/api/reference` un `/docs/examples/basic`, visi atbilstu šim maršrutam. `path` parametrs būtu masīvs, kas satur saskaņotos segmentus.

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

export default function DocsPage({ params }) {
  const { path } = params;
  return (
    <div>
      <h1>Dokumentācija</h1>
      <p>Ceļš: {path.join('/')}</p>
    </div>
  );
}

8. Paralēlie maršruti: vairāku lapu renderēšana vienlaikus

Paralēlie maršruti ļauj vienlaikus renderēt vairākas lapas vienā izkārtojumā. Tas ir īpaši noderīgi, veidojot sarežģītus lietotāja saskarnes modeļus, piemēram, informācijas paneļus ar vairākiem paneļiem vai modālos dialogus, kas parādās virs pašreizējās lapas. Paralēlie maršruti tiek definēti, izmantojot simbolu @, piemēram, `@children`, `@modal`. Tos var norādīt tieši URL vai navigēt uz tiem, izmantojot `useRouter` āķi.

Piemērs:

app/
  @children/
    page.js // Renderē galveno saturu
  @modal/
    login/
      page.js // Renderē pieteikšanās modālo logu

Lai parādītu paralēlos maršrutus, izmantojiet komponenti ``.

9. Pārtverošie maršruti: sarežģītu lietotāja saskarnes pāreju izveide

Pārtverošie maršruti ļauj ielādēt maršrutu no citas jūsu lietotnes daļas pašreizējā maršruta kontekstā. To var izmantot, lai izveidotu sarežģītas lietotāja saskarnes pārejas, piemēram, parādot modālo dialogu, noklikšķinot uz saites, neatstājot pašreizējo lapu. Tie tiek definēti, izmantojot sintaksi (...).

Datu ienese App direktorijā

App direktorijs ievieš jaunus un uzlabotus datu ieneses veidus, izmantojot React Servera komponentes un `fetch` API ar iebūvētām kešatmiņas un atkārtotas validācijas iespējām. Tas nodrošina labāku veiktspēju un racionalizētu izstrādes pieredzi. Datus var ienest gan Servera, gan Klienta komponentes, taču stratēģija atšķiras.

1. Datu ienese Servera komponentēs

Servera komponentes, kas ir noklusējuma opcija App direktorijā, var tieši ienest datus no datu bāzēm vai API. Tas tiek darīts komponentes funkcijas ietvaros pirms renderēšanas. Tā kā Servera komponentes tiek izpildītas uz servera, jūs varat droši iekļaut slepenās atslēgas un akreditācijas datus, neatklājot tos klientam. `fetch` API tiek automātiski memoizēts, kas nozīmē, ka identiski datu pieprasījumi tiek deduplicēti, vēl vairāk uzlabojot veiktspēju.

// app/page.js

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  // Atgrieztā vērtība *nav* serializēta
  // Jūs varat atgriezt Date, Map, Set, utt.

  if (!res.ok) {
    // Tas aktivizēs tuvāko `error.js` kļūdu robežu
    throw new Error('Neizdevās ienest datus');
  }

  return res.json();
}

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

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

2. Datu ienese Klienta komponentēs

Klienta komponentes, kas norādītas ar direktīvu 'use client' faila augšdaļā, tiek izpildītas lietotāja pārlūkprogrammā. Datu ienese Klienta komponentēs parasti ietver `useEffect` āķa un bibliotēkas, piemēram, `axios` vai `fetch` API, izmantošanu. Servera darbības nodrošina drošu veidu, kā mainīt servera datus no klienta komponentēm. Tas piedāvā drošu veidu, kā klienta komponentes var mijiedarboties ar datiem uz servera, tieši neatklājot API galapunktus.

// 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>Ielādē...</div>;
  }

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

SEO apsvērumi ar App direktoriju

App direktorija "serveris pirmajā vietā" pieeja piedāvā būtiskas priekšrocības SEO jomā. Tā kā saturs tiek renderēts uz servera, meklētājprogrammu rāpuļprogrammas var viegli piekļūt un indeksēt lapas saturu. Šeit ir daži galvenie SEO apsvērumi:

Metadati: Izmantojiet <head> tagu savos izkārtojumos un lapās, lai definētu metadatus, piemēram, virsrakstu, aprakstu un atslēgvārdus. Next.js nodrošina iebūvētu atbalstu metadatu pārvaldībai, izmantojot `Metadata` API.
Semantiskais HTML: Izmantojiet semantiskos HTML elementus (piemēram, <article>, <nav>, <aside>), lai loģiski strukturētu savu saturu un nodrošinātu kontekstu meklētājprogrammām.
Pieejamība: Nodrošiniet, ka jūsu lietotne ir pieejama lietotājiem ar invaliditāti. Tas ietver alternatīvā teksta nodrošināšanu attēliem, pareizas virsrakstu hierarhijas izmantošanu un pietiekama krāsu kontrasta nodrošināšanu.
Veiktspēja: Optimizējiet savas lietotnes veiktspēju, lai uzlabotu lietotāja pieredzi un meklētājprogrammu reitingus. Tas ietver klienta puses JavaScript minimizēšanu, attēlu optimizāciju un kešatmiņas izmantošanu.

App direktorija maršrutēšanas sistēmas izmantošanas priekšrocības

App direktorija maršrutēšanas sistēma piedāvā daudzas priekšrocības, kas uzlabo izstrādes procesu, uzlabo lietotnes veiktspēju un veicina labāku lietotāja pieredzi. Apskatīsim šīs priekšrocības sīkāk:

Uzlabota organizācija un uzturamība: Uz failiem balstītā maršrutēšanas sistēma pēc savas būtības veicina strukturētu un organizētu koda bāzi. Kartējot maršrutus tieši direktoriju struktūrai, izstrādātāji var viegli saprast saistību starp URL un atbilstošajām komponentēm. Šī skaidrā struktūra vienkāršo navigāciju koda bāzē un atvieglo lietotnes uzturēšanu un atjaunināšanu laika gaitā.
Uzlabota veiktspēja, izmantojot Servera komponentes: App direktorijs izmanto React Servera komponentes, lai renderētu saturu uz servera, samazinot JavaScript daudzumu, kas jālejupielādē un jāizpilda pārlūkprogrammā. Tas nodrošina ātrāku sākotnējo lapu ielādes laiku un uzlabotu kopējo veiktspēju, īpaši lietotājiem ar lēnāku interneta savienojumu vai mazāk jaudīgām ierīcēm.
Vienkāršota datu ienese un pārvaldība: App direktorijs vienkāršo datu ienesi, ļaujot izstrādātājiem ienest datus tieši Servera komponentēs. Tas novērš nepieciešamību pēc sarežģītas klienta puses datu ieneses loģikas un samazina risku atklāt sensitīvus datus klientam.
Deklaratīva un intuitīva maršrutēšana: Uz failiem balstītā maršrutēšanas sistēma nodrošina deklaratīvu un intuitīvu veidu, kā definēt lietotnes maršrutus. Vienkārši izveidojot failus un direktorijus `app` direktorijā, izstrādātāji var viegli definēt savas lietotnes navigācijas struktūru un uzvedību. Šī pieeja samazina nepieciešamību pēc sarežģītiem konfigurācijas failiem un padara maršrutēšanas sistēmu vieglāk saprotamu un lietojamu.
Iebūvēti izkārtojumi un veidnes konsekventai lietotāja saskarnei: App direktorijs nodrošina iebūvētu atbalstu izkārtojumiem un veidnēm, kas ļauj izstrādātājiem definēt koplietotus lietotāja saskarnes elementus, kas ir konsekventi vairākās lapās. Tas samazina koda dublēšanos un atvieglo konsekventa izskata un sajūtas uzturēšanu visā lietotnē.
Progresīvas maršrutēšanas funkcijas sarežģītiem lietošanas gadījumiem: App direktorijs piedāvā virkni progresīvu maršrutēšanas funkciju, piemēram, dinamiskos maršrutus, visu tverošos segmentus, paralēlos maršrutus un pārtverošos maršrutus. Šīs funkcijas ļauj izstrādātājiem risināt sarežģītus maršrutēšanas scenārijus un izveidot izsmalcinātus lietotāja saskarnes modeļus, kurus būtu grūti vai neiespējami sasniegt ar tradicionālajām maršrutēšanas sistēmām.

Praktiski App direktorija maršrutēšanas piemēri darbībā

Lai ilustrētu App direktorija maršrutēšanas sistēmas jaudu un elastību, apskatīsim dažus praktiskus piemērus:

1. Vienkārša emuāra izveide ar dinamiskiem maršrutiem

Apsveriet emuāra lietotni, kur katram emuāra ierakstam ir savs unikāls URL, kas balstīts uz tā īsvārdu (slug). Ar App direktoriju to var viegli ieviest, izmantojot dinamiskos maršrutus:

app/
  blog/
    [slug]/
      page.js

Direktorijs `[slug]` pārstāv dinamisku maršruta segmentu, kas atbildīs jebkuram URL zem `/blog/` ceļa. Fails `page.js` direktorijā `[slug]` renderēs saturu atbilstošajam emuāra ierakstam.

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

export async function generateStaticParams() {
  // Ienes visus emuāra ierakstus no datu bāzes vai API
  const posts = await fetchPosts();

  // Kartē ierakstus uz īsvārdu parametru masīvu
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const { slug } = params;

  // Ienes emuāra ierakstu ar atbilstošo īsvārdu
  const post = await fetchPost(slug);

  if (!post) {
    return <div>Ieraksts nav atrasts</div>;
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

Šis piemērs demonstrē, kā izmantot dinamiskos maršrutus, lai vienkāršā un efektīvā veidā izveidotu atsevišķas lapas katram emuāra ierakstam.

2. Modālā dialoga ieviešana ar pārtverošiem maršrutiem

Pieņemsim, ka vēlaties ieviest modālo dialogu, kas parādās, kad lietotājs noklikšķina uz saites, neatstājot pašreizējo lapu. To var panākt, izmantojot pārtverošos maršrutus:

app/
  (.)photos/
    [id]/
      @modal/
        page.js
  page.js

Šeit `(.)photos/[id]/@modal/page.js` pārtver pieprasījumus, kas tiek sūtīti uz `photos/[id]` no pašreizējās lapas. Kad lietotājs noklikšķinās uz saites uz konkrētu fotoattēlu, modālais dialogs parādīsies virs pašreizējās lapas, nevis pāries uz jaunu lapu.

3. Informācijas paneļa izkārtojuma izveide ar paralēliem maršrutiem

Iedomājieties, ka veidojat informācijas paneļa lietotni ar vairākiem paneļiem, kas jārenderē vienlaicīgi. Šī izkārtojuma sasniegšanai var izmantot paralēlos maršrutus:

app/
  @analytics/
    page.js       // Analītikas panelis
  @settings/
    page.js       // Iestatījumu panelis
  page.js           // Galvenais paneļa izkārtojums

Šajā struktūrā `@analytics` un `@settings` ir paralēlie maršruti, kas tiks renderēti galvenā informācijas paneļa izkārtojumā. Katram paralēlajam maršrutam ir savs page.js fails, kas definē saturu šim panelim. Izkārtojums var izlemt, kur tos novietot, izmantojot <Slot> komponenti.

Migrēšana no Pages direktorija uz App direktoriju

Esošas Next.js lietotnes migrēšana no Pages direktorija uz App direktoriju prasa rūpīgu plānošanu un izpildi. Lai gan App direktorijs piedāvā būtiskas priekšrocības, tas ievieš arī jaunus jēdzienus un modeļus, kas izstrādātājiem ir jāsaprot. Šeit ir soli pa solim ceļvedis, kas palīdzēs jums migrācijas procesā:

Izprotiet galvenās atšķirības: Pirms sākat migrāciju, pārliecinieties, ka pilnībā izprotat galvenās atšķirības starp Pages direktoriju un App direktoriju, ieskaitot maršrutēšanas sistēmu, datu ienesi un komponenšu arhitektūru.
Izveidojiet `app` direktoriju: Izveidojiet jaunu direktoriju ar nosaukumu `app` jūsu Next.js projekta saknē. Šajā direktorijā atradīsies visas komponentes un maršruti, kas ir daļa no App direktorija.
Migrējiet maršrutus pakāpeniski: Sāciet ar maršrutu migrāciju pakāpeniski, pa vienam. Tas ļaus jums pārbaudīt un atkļūdot katru maršrutu atsevišķi, samazinot kļūdu ieviešanas risku.
Pārveidojiet komponentes par Servera komponentēm: Pārveidojiet esošās React komponentes par Servera komponentēm, kad vien iespējams. Tas uzlabos veiktspēju un samazinās JavaScript daudzumu, kas jālejupielādē un jāizpilda pārlūkprogrammā.
Atjauniniet datu ieneses loģiku: Atjauniniet savu datu ieneses loģiku, lai izmantotu App direktorija iebūvētās datu ieneses iespējas. Tas var ietvert datu ieneses koda pārvietošanu no Klienta komponentēm uz Servera komponentēm.
Ieviesiet izkārtojumus un veidnes: Ieviesiet izkārtojumus un veidnes, lai definētu koplietotus lietotāja saskarnes elementus, kas ir konsekventi vairākās lapās.
Rūpīgi pārbaudiet: Rūpīgi pārbaudiet katru migrēto maršrutu, lai pārliecinātos, ka tas darbojas pareizi un nav regresiju.
Noņemiet `pages` direktoriju: Kad visi maršruti ir migrēti, jūs varat noņemt `/pages` direktoriju.

Secinājums

Next.js App direktorijs ir nozīmīga evolūcija uz failiem balstītā maršrutēšanā, piedāvājot izstrādātājiem organizētāku, veiktspējīgāku un elastīgāku veidu, kā veidot modernas tīmekļa lietotnes. Izprotot galvenos jēdzienus un pieņemot jaunās funkcijas, izstrādātāji var izmantot App direktoriju, lai radītu izcilu lietotāja pieredzi un sasniegtu lielāku produktivitāti. Next.js izstrādes nākotne ir App direktorijā, un tā pieņemšana ir stratēģisks solis, lai veidotu vismodernākās tīmekļa lietotnes. Tas ir spēcīgs rīks izstrādātājiem visā pasaulē.

Tā kā Next.js ekosistēma turpina attīstīties, App direktorijs kļūs par standartu robustu, mērogojamu un veiktspējīgu tīmekļa lietotņu veidošanā. Pieņemiet pārmaiņas, izpētiet iespējas un atraisiet pilnu Next.js potenciālu!