Pagrindinis NextJS veikimo principas

Ankstesnėse pamokose mes įdiegėme NextJS karkasą ir susipažinome su jo pagrindine struktūra. Atėjo laikas imtis pagrindinio darbo.

Pagrindinė NextJS dalis yra maršrutizavimas. Maršrutizavimas veikia taip: kai vartotojas įveda į naršyklės adreso juostą kokį nors URL, NextJS karkasas perduos į naršyklę tam tikrą failą, atitinkantį šį URL.

Maršrutizavimas NextJS yra organizuotas ypatingu būdu. Jo esmė ta, kad kiekvienam užklaustam URL atitinka kažkokia aplankas viduje src/app.

Be to, aplanko viduje turi būti failas pavadinimu page.jsx. Būtent šis failas bus perduodamas į naršyklę. Be to, šiame faile mes rašysime kodą JSX, o į naršyklę bus siunčiamas paruoštas HTML puslapio kodas.

Pažiūrėkime pavyzdžiu. Tarkime, mes norime, kad pagal URL /test/ būtų pateikiamas tam tikras tekstas.

Sukurkime atitinkamą aplanką: src/app/test. Viduje šio aplanko padarykime failą page.jsx su tokiu turiniu:

src/app/test/page.jsxexport default function Test() {
  return <h1>hello, user!</h1>;
}

Atidarykite naršyklėje mūsų URL: /test. Ir pamatysite tekstą, parašytą mūsų viduje JSX failo.

Pabandykite pakeisti tekstą ir išsaugokite failą. Po to tekstas automatiškai pakeis ir naršyklėje. Taip veikia NextJS kūrimo režime.