Next.js
Introduktion
Next.js lader til at være et af de mest populære frameworks til React og JavaScript. Med Next.js kan man lave en fullstack webapplikation, hvor man både kan have en backend og frontend i et projekt. Tidligere har jeg haft to forskellige JS projekter til henholdsvis backend og frontend, men med Next.js kan man have en forenet codebase. Next.js gør det også muligt at lave server-side rendering, hvilket gør at brugeren kun for sendt det de har brug for i stedet for hele applikationen. Som mit første next.js projekt, fulgte jeg next.js's tutorial på deres egen hjemmeside, hvilket gav mig en god introduktion til det. Produktet kan ses på det første billede.
Pathing
Et problem med React.js, er at det som udgangspunkt ikke rigtig understøtter pathing/at gå fra side til side. Det fungere bedst som en one-page webapp, hvor alt kommer og går løbende. Problemet med dette, er at siden ikke fungere godt med søgemaskiner som google (Læs mere om SEO). Det betyder f.eks. at når man ville søge på 'den frie bibel' på google, vil der ikke kun komme en side frem, man alle undersiderne. På den måde ville man f.eks. kunne gøre 1. Mosebog kap. 2 til en side man ville kunne finde på google. På ovenstående billede kan man se et eksempel fra mit blogprojekt, og det fungere simpelthen bare ved at man laver .js filer og mapper som så bruges til pathing. F.eks. ville localhost:3000/posts/1 føre en til filen [id].js, hvor '1' så angiver id'et på blogopslaget.
Det samme kan så benyttes til projektet med den frie bibel. Oppe i toppen af siden, forventer jeg at der skal være en navbar, hvormed brugeren kan skifte fra de forskellige sider, og læse mere om den frie bibel eller tilgå forskellige menuer.
Det handler simpelt så bare om at lave en .js fil og mappe, alt efter hvordan man gerne vil have at URL'en eller path'en skal være til den gældende side. Med dette pathing, kan man også tilgå API'en, ved at man bare lave en "api" mappe.
Når man så kalder API'en, går next.js bare igennem den funktion man har eksporteret, og sender resultatet tilbage til brugeren. I dette tilfælde, har jeg bare kopieret koden fra det gamle projekt ind i det nye next.js projekt.
