Lietuvių

Išnagrinėkite transformuojančią failais pagrįstą maršrutizavimo sistemą Next.js App aplanke, kuri siūlo geresnę organizaciją, našumą ir kūrėjo patirtį modernioms interneto programoms.

Next.js App aplankas: failais pagrįsto maršrutizavimo revoliucija

Next.js nuolat plečia interneto svetainių kūrimo ribas, siūlydama kūrėjams galingus įrankius ir funkcijas, skirtas kurti našias, keičiamo dydžio ir patogias vartotojui programas. App aplanko įdiegimas yra didelis žingsnis į priekį, ypač dėl novatoriško požiūrio į failais pagrįstą maršrutizavimą. Šiame straipsnyje gilinamasi į App aplanko maršrutizavimo mechanizmą, nagrinėjami jo privalumai, pagrindinės sąvokos ir praktinis pritaikymas kuriant modernias interneto programas su Next.js.

Suprantant maršrutizavimo raidą Next.js

Prieš App aplanką, Next.js maršrutizavimui naudojo Pages aplanką. Nors šis metodas buvo veiksmingas, jis turėjo tam tikrų apribojimų. Pages aplankas naudojo paprastą failais pagrįstą maršrutizavimo sistemą, kur kiekvienas failas `pages` aplanke atitiko maršrutą. Pavyzdžiui, `pages/about.js` būtų priskirtas maršrutui `/about`.

Nors Pages aplankas buvo paprastas, jam trūko integruoto palaikymo sudėtingiems maketams, duomenų gavimo strategijoms ir serverio pusės atvaizdavimo modeliams, todėl kūrėjams dažnai tekdavo šias funkcijas įgyvendinti rankiniu būdu. Be to, glaudus duomenų gavimo ir komponentų atvaizdavimo ryšys kartais galėjo sukelti našumo problemų.

App aplankas išsprendžia šiuos apribojimus įdiegdamas lankstesnę ir galingesnę maršrutizavimo sistemą, pagrįstą React serverio komponentais, maketais ir kitomis pažangiomis funkcijomis. Jis peržengia paprasto failų priskyrimo maršrutams ribas ir siūlo labiau deklaratyvų ir komponuojamą požiūrį į programos maršrutų ir maketų apibrėžimą.

Pristatome App aplanką: nauja maršrutizavimo paradigma

App aplankas, esantis jūsų Next.js projekto šakniniame aplanke pavadinimu `app`, pristato iš esmės kitokį požiūrį į maršrutizavimą. Užuot tiesiogiai susiejus failus su maršrutais, App aplankas naudoja konvencijomis pagrįstą sistemą, kurioje aplankų struktūra ir specialūs failai nustato programos maršrutus.

Šis požiūris siūlo keletą esminių privalumų:

Pagrindinės App aplanko maršrutizavimo sistemos sąvokos

Norint efektyviai naudoti App aplanko maršrutizavimo sistemą, būtina suprasti pagrindines sąvokas, kurios grindžia jos funkcionalumą:

1. Maršruto segmentai ir aplankai

Kiekvienas aplankas `app` aplanke atitinka maršruto segmentą. Aplanko pavadinimas atitinka kelio segmentą URL adrese. Pavyzdžiui, `app/blog/posts` aplanko struktūra atitiktų `/blog/posts` maršrutą.

Apsvarstykite šią struktūrą:

app/
  blog/
    posts/
      page.js

Ši struktūra apibrėžia maršrutą `/blog/posts`. Failas `page.js` `posts` aplanke yra maršruto segmento komponentas, kuris atvaizduoja turinį šiam maršrutui.

2. `page.js` failas: maršruto turinio atvaizdavimas

Failas page.js (arba page.tsx naudojant TypeScript) yra specialus failas, apibrėžiantis turinį, kuris bus atvaizduotas konkrečiam maršruto segmentui. Tai yra to maršruto įėjimo taškas. Šis failas turi eksportuoti React komponentą kaip numatytąjį eksportą (default export).

Pavyzdys:

// app/blog/posts/page.js

export default function PostsPage() {
  return (
    <div>
      <h1>Tinklaraščio įrašai</h1>
      <p>Čia bus rodomas tinklaraščio įrašų sąrašas.</p>
    </div>
  );
}

3. Maketai: bendros vartotojo sąsajos apibrėžimas

Maketai (Layouts) leidžia apibrėžti vartotojo sąsają, kuri yra bendra keliems puslapiams ar maršruto segmentams. Makete gali būti elementų, tokių kaip antraštės, poraštės, šoninės juostos ar bet kokie kiti komponentai, kurie turėtų būti nuoseklūs visoje programos dalyje. Maketai apibrėžiami naudojant `layout.js` (arba `layout.tsx`) failą.

Maketai yra įdėti vienas į kitą. Tai reiškia, kad šakninis maketas (`app/layout.js`) apgaubia visą programą, o įdėti maketai apgaubia konkrečius maršruto segmentus. Naršant tarp maršrutų, kurie dalijasi tuo pačiu maketu, Next.js išsaugo maketo būseną ir išvengia jo perpiešimo, taip pagerindamas našumą ir užtikrindamas sklandesnę vartotojo patirtį.

Pavyzdys:

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <nav>
            <a href="/">Pradžia</a> |
            <a href="/blog">Tinklaraštis</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>Autorių teisės 2023</p>
        </footer>
      </body>
    </html>
  );
}

Šiame pavyzdyje `RootLayout` apibrėžia pagrindinę HTML struktūrą, antraštę, poraštę ir navigaciją visai programai. Bet kuris puslapis, atvaizduotas `app` aplanke, bus apgaubtas šiuo maketu.

4. Šablonai: būsenos išsaugojimas tarp maršrutų

Panašiai kaip maketai, šablonai (templates) taip pat apgaubia antrinius maršrutus. Tačiau, skirtingai nei maketai, šablonai sukuria naują komponento egzempliorių kiekvienam antriniam maršrutui. Tai reiškia, kad šablono būsena nėra išsaugoma naršant tarp maršrutų, esančių šablone. Šablonai naudingi tais atvejais, kai reikia atstatyti arba iš naujo inicializuoti būseną perėjimo tarp maršrutų metu. Šablonams kurti naudokite `template.js` (arba `template.tsx`).

5. Maršrutų grupės: maršrutų organizavimas be URL segmentų

Maršrutų grupės (Route groups) leidžia organizuoti maršrutus App aplanke nepaveikiant URL struktūros. Maršrutų grupės apibrėžiamos apgaubiant aplanko pavadinimą skliausteliais, pvz., `(group-name)`. Šie skliausteliai nurodo Next.js, kad aplankas turi būti traktuojamas kaip loginis grupavimo mechanizmas, o ne kaip maršruto segmentas.

Tai ypač naudinga organizuojant dideles programas su daugybe maršrutų. Pavyzdžiui, galite naudoti maršrutų grupes skirtingoms programos dalims atskirti, pvz., `(marketing)` ir `(app)`. Šios grupės veikia tik failų struktūrą, o ne URL kelius.

Pavyzdys:

app/
  (marketing)/
    home/
      page.js  // Prieinama per /home
    about/
      page.js  // Prieinama per /about
  (app)/
    dashboard/
      page.js  // Prieinama per /dashboard

6. Dinaminiai maršrutai: kintamų segmentų tvarkymas

Dinaminiai maršrutai leidžia kurti maršrutus su kintamais segmentais. Tai naudinga tais atvejais, kai reikia generuoti maršrutus pagal duomenis, pvz., tinklaraščio įrašus, produktų puslapius ar vartotojų profilius. Dinaminiai maršruto segmentai apibrėžiami apgaubiant segmento pavadinimą laužtiniais skliaustais, pvz., `[id]`. `id` yra parametras, kurį galima pasiekti `page.js` komponente.

Pavyzdys:

app/
  blog/
    [slug]/
      page.js

Šiame pavyzdyje `[slug]` yra dinaminis maršruto segmentas. URL, pvz., `/blog/my-first-post`, atitiktų šį maršrutą, o `slug` parametras būtų nustatytas kaip `my-first-post`. `slug` parametrą galite pasiekti `page.js` komponente naudodami `params` rekvizitą.

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

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Tinklaraščio įrašas: {slug}</h1>
      <p>Tinklaraščio įrašo su slug: {slug} turinys</p>
    </div>
  );
}

Jums reikia sugeneruoti galimas šių dinaminių maršrutų reikšmes. Next.js suteikia `generateStaticParams` funkciją statinių svetainių generavimui (SSG) ir serverio pusės atvaizdavimui (SSR). Ši funkcija leidžia nurodyti, kurie dinaminiai maršrutai turėtų būti iš anksto atvaizduoti kūrimo metu.

// 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>Tinklaraščio įrašas: {slug}</h1>
      <p>Tinklaraščio įrašo su slug: {slug} turinys</p>
    </div>
  );
}

7. Viską apimantys segmentai: nežinomų maršrutų tvarkymas

Viską apimantys segmentai (Catch-all segments) yra dinaminio maršruto tipas, leidžiantis suderinti bet kokį segmentų skaičių URL adrese. Jie apibrėžiami pridedant tris taškus prieš segmento pavadinimą, pvz., `[...path]`. Viską apimantys segmentai yra naudingi kuriant lanksčius maršrutus, kurie gali tvarkyti įvairias URL struktūras.

Pavyzdys:

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

Šiame pavyzdyje `[...path]` yra viską apimantis segmentas. URL adresai, tokie kaip `/docs/introduction`, `/docs/api/reference` ir `/docs/examples/basic`, visi atitiktų šį maršrutą. `path` parametras būtų masyvas, kuriame yra suderinti segmentai.

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

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

8. Lygiagretūs maršrutai: kelių puslapių atvaizdavimas vienu metu

Lygiagretūs maršrutai (Parallel Routes) leidžia vienu metu atvaizduoti kelis puslapius tame pačiame makete. Tai ypač naudinga kuriant sudėtingus vartotojo sąsajos modelius, pvz., prietaisų skydelius su keliais skydeliais arba modalinius dialogus, kurie atsiranda virš dabartinio puslapio. Lygiagretūs maršrutai apibrėžiami naudojant simbolį `@`, pvz., `@children`, `@modal`. Jie gali būti nurodyti tiesiogiai URL adrese arba pasiekiami naudojant `useRouter` kabliuką.

Pavyzdys:

app/
  @children/
    page.js // Atvaizduoja pagrindinį turinį
  @modal/
    login/
      page.js // Atvaizduoja prisijungimo modalinį langą

Norėdami rodyti lygiagrečius maršrutus, naudokite `` komponentą.

9. Perimantys maršrutai: sudėtingų vartotojo sąsajos perėjimų kūrimas

Perimantys maršrutai (Intercepting Routes) leidžia įkelti maršrutą iš kitos programos dalies dabartinio maršruto kontekste. Tai gali būti naudojama kuriant sudėtingus vartotojo sąsajos perėjimus, pvz., rodant modalinį dialogą paspaudus nuorodą, nenukrypstant nuo dabartinio puslapio. Jie apibrėžiami naudojant `(...)` sintaksę.

Duomenų gavimas App aplanke

App aplankas pristato naujus ir patobulintus duomenų gavimo būdus, pasitelkiant React serverio komponentus ir `fetch` API su integruotomis talpyklos ir pakartotinio patvirtinimo galimybėmis. Tai lemia geresnį našumą ir supaprastintą kūrimo patirtį. Tiek serverio, tiek kliento komponentai gali gauti duomenis, tačiau strategija skiriasi.

1. Duomenų gavimas serverio komponentuose

Serverio komponentai, kurie yra numatytieji App aplanke, gali tiesiogiai gauti duomenis iš duomenų bazių ar API. Tai daroma komponento funkcijoje prieš atvaizdavimą. Kadangi serverio komponentai vykdomi serveryje, galite saugiai įtraukti slaptus raktus ir kredencialus, neatskleisdami jų klientui. `fetch` API yra automatiškai memoizuojama, o tai reiškia, kad identiškos duomenų užklausos yra deduplikuojamos, taip dar labiau pagerinant našumą.

// app/page.js

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  // Grąžinama vertė *nėra* serializuojama
  // Galite grąžinti Date, Map, Set ir t.t.

  if (!res.ok) {
    // Tai aktyvuos artimiausią `error.js` klaidų ribą
    throw new Error('Nepavyko gauti duomenų');
  }

  return res.json();
}

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

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

2. Duomenų gavimas kliento komponentuose

Kliento komponentai, pažymėti direktyva `'use client'` failo viršuje, vykdomi vartotojo naršyklėje. Duomenų gavimas kliento komponentuose paprastai apima `useEffect` kabliuko ir bibliotekos, pvz., `axios` ar `fetch` API, naudojimą. Serverio veiksmai (Server Actions) suteikia saugų būdą keisti serverio duomenis iš kliento komponentų. Tai suteikia saugų būdą kliento komponentams sąveikauti su duomenimis serveryje, tiesiogiai neatskleidžiant API galinių taškų.

// 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>Kraunama...</div>;
  }

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

SEO aspektai su App aplanku

App aplanko „serveris pirmiausia“ požiūris suteikia didelių privalumų SEO. Kadangi turinys atvaizduojamas serveryje, paieškos sistemų robotai gali lengvai pasiekti ir indeksuoti puslapio turinį. Štai keletas pagrindinių SEO aspektų:

App aplanko maršrutizavimo sistemos naudojimo privalumai

The App aplanko maršrutizavimo sistema siūlo daugybę privalumų, kurie pagerina kūrimo procesą, programos našumą ir prisideda prie geresnės vartotojo patirties. Išnagrinėkime šiuos privalumus išsamiau:

Praktiniai App aplanko maršrutizavimo pavyzdžiai

Norėdami iliustruoti App aplanko maršrutizavimo sistemos galią ir lankstumą, apsvarstykime keletą praktinių pavyzdžių:

1. Paprasto tinklaraščio kūrimas su dinaminiais maršrutais

Apsvarstykite tinklaraščio programą, kurioje kiekvienas tinklaraščio įrašas turi savo unikalų URL, pagrįstą jo „slug“. Naudojant App aplanką, tai galima lengvai įgyvendinti naudojant dinaminius maršrutus: ``` app/ blog/ [slug]/ page.js ``` Aplankas `[slug]` atspindi dinaminį maršruto segmentą, kuris atitiks bet kokį URL, esantį po `/blog/` keliu. Failas `page.js` `[slug]` aplanke atvaizduos atitinkamo tinklaraščio įrašo turinį. ```javascript // app/blog/[slug]/page.js export async function generateStaticParams() { // Gaunami visi tinklaraščio įrašai iš duomenų bazės ar API const posts = await fetchPosts(); // Įrašai paverčiami slug parametrų masyvu return posts.map((post) => ({ slug: post.slug })); } export default async function BlogPost({ params }) { const { slug } = params; // Gaunamas tinklaraščio įrašas su atitinkamu slug const post = await fetchPost(slug); if (!post) { return <div>Įrašas nerastas</div>; } return ( <article> <h1>{post.title}</h1> <p>{post.content}</p> </article> ); } ``` Šis pavyzdys parodo, kaip naudoti dinaminius maršrutus, norint paprastai ir efektyviai sukurti atskirus puslapius kiekvienam tinklaraščio įrašui.

2. Modalinio dialogo įgyvendinimas su perimančiais maršrutais

Tarkime, norite įgyvendinti modalinį dialogą, kuris atsiranda, kai vartotojas spusteli nuorodą, nenukrypstant nuo dabartinio puslapio. Tai galima pasiekti naudojant perimančius maršrutus: ``` app/ (.)photos/ [id]/ @modal/ page.js page.js ``` Čia `(.)photos/[id]/@modal/page.js` perima užklausas, einančias į `photos/[id]` iš dabartinio puslapio. Kai vartotojas spusteli nuorodą į konkrečią nuotrauką, modalinis dialogas pasirodys virš dabartinio puslapio, o ne pereis į naują puslapį.

3. Prietaisų skydelio maketo kūrimas su lygiagrečiais maršrutais

Įsivaizduokite, kad kuriate prietaisų skydelio programą su keliais skydeliais, kuriuos reikia atvaizduoti vienu metu. Lygiagretūs maršrutai gali būti naudojami šiam maketui pasiekti: ``` app/ @analytics/ page.js // Analitikos prietaisų skydelis @settings/ page.js // Nustatymų skydelis page.js // Pagrindinis prietaisų skydelio maketas ```

Šioje struktūroje `@analytics` ir `@settings` atspindi lygiagrečius maršrutus, kurie bus atvaizduojami pagrindiniame prietaisų skydelio makete. Kiekvienas lygiagretus maršrutas turi savo `page.js` failą, kuris apibrėžia to skydelio turinį. Maketas gali nuspręsti, kur juos išdėstyti, naudojant `` komponentą.

Migravimas iš Pages aplanko į App aplanką

Esamos Next.js programos migravimas iš Pages aplanko į App aplanką reikalauja kruopštaus planavimo ir vykdymo. Nors App aplankas siūlo didelių privalumų, jis taip pat pristato naujas sąvokas ir modelius, kuriuos kūrėjai turi suprasti. Štai žingsnis po žingsnio vadovas, padėsiantis jums per migracijos procesą:

  1. Supraskite pagrindinius skirtumus: prieš pradedant migraciją, įsitikinkite, kad gerai suprantate pagrindinius skirtumus tarp Pages aplanko ir App aplanko, įskaitant maršrutizavimo sistemą, duomenų gavimą ir komponentų architektūrą.
  2. Sukurkite `app` aplanką: savo Next.js projekto šakniniame kataloge sukurkite naują aplanką pavadinimu `app`. Šiame aplanke bus visi komponentai ir maršrutai, kurie yra App aplanko dalis.
  3. Migruokite maršrutus palaipsniui: pradėkite nuo laipsniško maršrutų migravimo, po vieną. Tai leis jums išbandyti ir derinti kiekvieną maršrutą atskirai, sumažinant klaidų riziką.
  4. Konvertuokite komponentus į serverio komponentus: kai tik įmanoma, konvertuokite esamus React komponentus į serverio komponentus. Tai pagerins našumą ir sumažins JavaScript kiekį, kurį reikia atsisiųsti ir vykdyti naršyklėje.
  5. Atnaujinkite duomenų gavimo logiką: atnaujinkite savo duomenų gavimo logiką, kad pasinaudotumėte App aplanko integruotomis duomenų gavimo galimybėmis. Tam gali tekti perkelti duomenų gavimo kodą iš kliento komponentų į serverio komponentus.
  6. Įgyvendinkite maketus ir šablonus: įgyvendinkite maketus ir šablonus, kad apibrėžtumėte bendrus vartotojo sąsajos elementus, kurie yra nuoseklūs keliuose puslapiuose.
  7. Kruopščiai testuokite: kruopščiai išbandykite kiekvieną migruotą maršrutą, kad įsitikintumėte, jog jis veikia teisingai ir nėra jokių regresijų.
  8. Pašalinkite `pages` aplanką: kai visi maršrutai bus migruoti, galite pašalinti `/pages` aplanką.

Išvada

Next.js App aplankas yra reikšminga failais pagrįsto maršrutizavimo evoliucija, siūlanti kūrėjams organizuotesnį, našesnį ir lankstesnį būdą kurti modernias interneto programas. Suprasdami pagrindines sąvokas ir pasinaudodami naujomis funkcijomis, kūrėjai gali panaudoti App aplanką, kad sukurtų išskirtines vartotojo patirtis ir pasiektų didesnį produktyvumą. Next.js kūrimo ateitis slypi App aplanke, ir jo pritaikymas yra strateginis žingsnis kuriant pažangiausias interneto programas. Tai galingas įrankis kūrėjams visame pasaulyje.

Tobulėjant Next.js ekosistemai, App aplankas yra pasirengęs tapti standartu kuriant tvirtas, keičiamo dydžio ir našias interneto programas. Priimkite pokyčius, tyrinėkite galimybes ir atskleiskite visą Next.js potencialą!