Laskusivun Rakentaminen
Onnittelut! Olemme käyneet läpi kaikki Next.js:n peruskäsitteet. Sinulla on nyt valmiudet rakentaa erilaisia sovelluksia Next.js:llä.
Seuraavaksi syvennymme edistyneempiin käsitteisiin, jotka ovat valinnaisia joissakin sovelluksissa tai projekteissa. Näiden käsitteiden hallitseminen voi kuitenkin olla erittäin hyödyllistä.
Takaisin projektiin
Keskitetään nyt huomio Invoices-sivulle ja jatketaan sen kehittämistä.
Kopioi ja liitä seuraava koodi tiedostoon app/dashboard/invoices/page.tsx. Käytä hetki koodin tarkasteluun ja sen tarkoituksen ymmärtämiseen.
Sovelluksessa on kolme keskeistä ominaisuutta:
Searchmahdollistaa käyttäjien etsiä tiettyjä laskuja;Paginationantaa mahdollisuuden siirtyä laskusivujen välillä;Tablenäyttää kaikki saatavilla olevat laskut.
Käytämme URL-hakuehtoja hakutilan hallintaan, mikä saattaa olla uutta, jos olet tottunut käyttämään asiakaspuolen tilaa.
Hyödyt sisältävät:
- Käyttäjät voivat tallentaa kirjanmerkkeihin tai jakaa nykyisen sovellustilan, mukaan lukien hakukyselyt ja suodattimet, koska parametrit ovat osa URL-osoitetta;
- URL-parametrit helpottavat palvelinpuolen renderöintiä, mikä yksinkertaistaa alkuperäisen tilan määrittelyä palvelimella;
- Kun hakutiedot ovat URL-osoitteessa, käyttäjäkäyttäytymisen seuranta helpottuu ja vaatii vähemmän asiakaspuolen logiikkaa.
Jatkamme tämän ajatuksen parissa seuraavassa luvussa.
Käytännössä
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain how the commented-out Suspense and Pagination components will be used?
What is the purpose of using URL search parameters for the search functionality?
Can you provide more details about how server-side rendering works with this setup?
Awesome!
Completion rate improved to 2.08Laskusivun Rakentaminen
Pyyhkäise näyttääksesi valikon
Onnittelut! Olemme käyneet läpi kaikki Next.js:n peruskäsitteet. Sinulla on nyt valmiudet rakentaa erilaisia sovelluksia Next.js:llä.
Seuraavaksi syvennymme edistyneempiin käsitteisiin, jotka ovat valinnaisia joissakin sovelluksissa tai projekteissa. Näiden käsitteiden hallitseminen voi kuitenkin olla erittäin hyödyllistä.
Takaisin projektiin
Keskitetään nyt huomio Invoices-sivulle ja jatketaan sen kehittämistä.
Kopioi ja liitä seuraava koodi tiedostoon app/dashboard/invoices/page.tsx. Käytä hetki koodin tarkasteluun ja sen tarkoituksen ymmärtämiseen.
Sovelluksessa on kolme keskeistä ominaisuutta:
Searchmahdollistaa käyttäjien etsiä tiettyjä laskuja;Paginationantaa mahdollisuuden siirtyä laskusivujen välillä;Tablenäyttää kaikki saatavilla olevat laskut.
Käytämme URL-hakuehtoja hakutilan hallintaan, mikä saattaa olla uutta, jos olet tottunut käyttämään asiakaspuolen tilaa.
Hyödyt sisältävät:
- Käyttäjät voivat tallentaa kirjanmerkkeihin tai jakaa nykyisen sovellustilan, mukaan lukien hakukyselyt ja suodattimet, koska parametrit ovat osa URL-osoitetta;
- URL-parametrit helpottavat palvelinpuolen renderöintiä, mikä yksinkertaistaa alkuperäisen tilan määrittelyä palvelimella;
- Kun hakutiedot ovat URL-osoitteessa, käyttäjäkäyttäytymisen seuranta helpottuu ja vaatii vähemmän asiakaspuolen logiikkaa.
Jatkamme tämän ajatuksen parissa seuraavassa luvussa.
Käytännössä
Kiitos palautteestasi!
