Hoe zit de structuur van `next.js` in elkaar?

[SamaraFellaDina]

In issue #9 , heb ik gekeken naar welke site generator ik wou kijken. Hier kan je het voor onderzoek vinden.

in issue #28 , zien wij hoe we een project opzetten. Maar hoe zit het in elkaar?

Bronnen

• De project structuur documentatie van next.js

Wat is de project structuur?

Deze vraag laat me denken aan de volgende punten:

• Waarin maak ik componenten
• Hoe maak ik de layout
• Waar staat de global.css

Na de installatie

Na alles te hebben geinstalleert, zie de structuur er zo uit:

Wat valt op?

• Er is een source map met een aantal files
• alle packages zijn aangemaakt.

De structuur

Next.js heeft aangegeven dat er vier mappen zijn bij het project.

• Een app, waarin de app router kan vinden. bij #28 heb ik meer uitgelegd over de app router.
• Een pages map, waarin je alle pagina's kan terugvinden
• public map, waar alle assets staan, dit is overgins optioneel maar het word zeker aangeraden
• src folder, dit is ook optioneel (ik heb er wel voor gekozen.) Hierin kan je gemakkelijk alles terugvinden voor het bouwen van je pagina

optionele app conventies

Next.js vertelt ook meer over de files die je kan invoegen bij het maken van een goede site. Hier een aantal voorbeelden:

• layout.js, waarin je dus dingen kan invoegen als een statische header en footer.
• error.js, waarin je een pagina kan genereren wanneer er een foutmelding word weergeven.

zo heb je nog veel meer voorbeelden, deze zijn bekend bij mij van een vorige project. Hieronder kan je het hele lijstje vinden aan dingen.

Maken van mijn project structuur

In issue #53, kan je de gehele documentatie vinden van hoe ik deze structuur eigen maak

[SamaraFellaDina]

Maken van mijn project structuur

Wat wil ik allemaal in mijn project?

• ik wil een public map, voor alle assets.
• Ik wil een error.js & layout.js pagina

Maken van een public

Ik heb een public map gemaakt, met daarin alle inhoud die later verschijnt

[SamaraFellaDina]

Componenten

zie issue #48

Hier vind je hoe ik een component heb ontwikkelt