Suunnitellaan sovellukselle yhteinen asettelu. Tässä tapauksessa luodaan komponentti, joka helpottaa sovelluksen sivujen selaamista ja tarjoaa myös mahdollisuuden kirjautua ulos (lisätietoa valtuutuksesta myöhemmissä luvuissa).

Takaisin projektiin

Seuraavaksi luodaan layout.tsx dashboardille. Lisää /dashboard-kansioon uusi tiedosto nimeltä layout.tsx ja lisää siihen seuraava koodi:

Tässä koodissa tapahtuu muutama keskeinen asia. Tarkastellaan niitä tarkemmin:

• Tuodaan <SideNav />-komponentti ja liitetään se asetteluun. Kaikki tässä tuodut komponentit sisältyvät sivun kokonaisulkoasuun;
• <Layout />-komponentilla on children-prop. Tämä "lapsi" voi olla joko sivu tai toinen asettelu. Erityisesti /dashboard-kansiossa olevat sivut sijoitetaan automaattisesti <Layout />-komponentin sisään.

Yritä nyt seurata linkkiä http://localhost:3000/dashboard ja siirry kojelaudan ja laskusivun välillä.