JavaScript-begrepp förklarade

npm är det paketregister och den pakethanterare som används av praktiskt taget alla JavaScript-projekt, inklusive Next.js. Med npm install lägger du till bibliotek som ditt projekt är beroende av; de sparas i node_modules och listas i package.json.

Alternativa pakethanterare som yarn och pnpm fungerar med samma paketregister men har andra prestanda- och låsningsegenskaper. Next.js-projektet du skapar med create-next-app sätter upp npm-konfigurationen åt dig.

npm run används för att köra skript definierade i package.json: npm run dev startar utvecklingsservern, npm run build bygger projektet, npm run lint kör kodgranskning.

En bundler tar ditt projekts många JavaScript-filer, CSS-moduler, bilder och beroenden och väver ihop dem till ett litet antal optimerade filer som webbläsaren laddar effektivt.

Next.js använder Turbopack (och tidigare webpack) som bundler, konfigurerat bakom kulisserna. Som utvecklare behöver du sällan röra bundlerkonfigurationen — Next.js sköter koddelning, lazy loading och optimering automatiskt.

Bundlern ansvarar också för tree shaking (ta bort oanvänd kod), minifiering och source maps för felsökning. Att förstå vad en bundler gör hjälper dig att felsöka när något oväntat hamnar i klientbundeln.

Transpilering är processen att översätta kod skriven i ett språk eller en språkversion till ett annat. I JavaScript-ekosystemet handlar det oftast om att översätta TypeScript till vanlig JavaScript, eller att omvandla modern JavaScript-syntax till en variant som äldre webbläsare förstår.

Next.js transpilerar din kod automatiskt som en del av byggprocessen via SWC — ett verktyg skrivet i Rust som är många gånger snabbare än de äldre Babel-baserade lösningarna.

Som Next.js-utvecklare sker transpileringen helt automatiskt. Du skriver modern TypeScript eller JavaScript och Next.js ser till att utdatan är kompatibel med de webbläsare du stödjer.

TypeScript är ett tillägg till JavaScript där du kan ange typer för variabler, funktioner och objekt. Editorn och TypeScript-kompilatorn fångar typfel medan du skriver — innan koden ens körs.

I stora kodbaser, med flera utvecklare och komplexa dataflöden, gör typer det enklare att förstå vad en funktion förväntar sig och vad den returnerar. Autokomplettering och inline-dokumentation i editorn blir också mycket bättre.

Next.js stödjer TypeScript nativt: döp filerna till .ts eller .tsx så fungerar allt direkt. Typer finns bara i koden du skriver och kompileras bort — de påverkar inte den färdiga appen.

I JavaScript är en modul en fil som exporterar delar av sin kod — funktioner, objekt, konstanter — för att andra filer ska kunna importera dem. Det är mekanismen som gör att ett projekt kan delas upp i hanterbara delar i stället för att leva i en enda lång fil.

Next.js använder ES-moduler (import/export-syntaxen) och lägger till egna alias som @/ för att förenkla relativa importer. import Button from '@/components/Button' fungerar från vilken fil som helst utan att räkna upp mappar.

Att strukturera kod i väldefinierade moduler med tydliga gränssnitt gör den enklare att testa, underhålla och återanvända. En modul ska helst ha ett tydligt syfte som du kan förklara i en mening.

Async/await är syntaktiskt socker ovanpå promises som gör asynkron kod läsbar. En funktion markerad med async returnerar alltid ett promise. Inuti den kan du använda await framför ett promise-uttryck — kodens exekvering pausar tills promiset löser sig och du får tillbaka värdet direkt.

Felhantering sker med vanlig try/catch i stället för .catch()-kedjor, vilket gör felhanteringen mer synlig och lättare att strukturera.

I Next.js server components och server actions är async/await naturligt: du kan fetcha data, läsa från databasen och await:a resultaten direkt i komponentfunktionen. Det gör server components lätta att följa — koden ser synkron ut trots att nätverksanrop sker.

fetch() är standardsättet att göra HTTP-anrop i modern JavaScript. Du anropar fetch() med en URL och valfria inställningar som metod, headers och kropp, och väntar med await på svaret. Svaret är ett Response-objekt vars body du läser med await response.json() eller await response.text().

I Next.js utökar ramverket den inbyggda fetch med cachning och revalidering. Du kan styra hur länge ett fetch-svar cachas direkt i anropet: fetch(url, { next: { revalidate: 3600 } }) cachar svaret i en timme.

I Next.js 15 är fetch-anrop inte cachade som standard — du måste explicit välja cachning. Det minskar risken för oväntad gammaldags data.

JSON är det dominerande formatet för API-svar och konfigurationsfiler i webbutveckling. Det kan representera objekt, arrayer, strängar, siffror och booleska värden i ett format som är maskinläsbart och relativt läsbart för en människa.

I JavaScript omvandlas JSON-strängar till objekt med JSON.parse() och tillbaka med JSON.stringify(). Fetch-svar som returnerar application/json läses med await response.json().

Next.js konfigurationsfil next.config.js är inte JSON (det är ett JS-objekt), men package.json är ren JSON. Att förstå JSON-formatet och dess begränsningar — till exempel att JSON inte stödjer undefined, Date-objekt eller cirkulära referenser — är grundläggande JavaScript-kunskap.

En linter läser igenom din kod och flaggar problem: oanvända variabler, farliga mönster, formateringsavvikelser och brott mot ditt projekts kodstandarder. Linting körs ofta i editorn i realtid och som ett steg i CI/CD-pipelinen.

Next.js levereras med ESLint konfigurerat som standard och kör lint som ett steg i byggprocessen via npm run lint. Biome är ett modernare alternativ som kombinerar linting och formatering i ett verktyg med snabbare körning.

Konsekvent linting minskar kodgranskningsfriktion — recensenter kan fokusera på logik och design i stället för formateringsfrågor — och fångar enkla buggar tidigt.

Node.js tog JavaScript från webbläsaren och gjorde det körbart på servern, vilket möjliggjorde hela JavaScript-ekosystemet vi har idag — npm, moderna byggsystem och ramverk som Next.js.

Next.js-applikationen körs i en Node.js-process på servern, och många av Next.js funktioner förlitar sig på Node.js API:er för filsystem, nätverk och kryptografi. Som Next.js-utvecklare behöver du sällan arbeta direkt mot Node.js API:er.

När du kör npm run dev startar du en Node.js-process lokalt. I produktion kör du antingen en Node.js-server direkt eller driftsätter via en plattform som hanterar Node.js åt dig.

Promises löste callback-helvetet: i stället för nästlade funktioner som anropas när asynkrona operationer är klara, returnerar moderna API:er ett promise som du kan kedja med .then() och .catch() — eller, bättre, använda med async/await.

Ett promise är i ett av tre tillstånd: pending (väntar), fulfilled (löst med ett värde) eller rejected (avvisat med ett fel). Promise.all() kör flera promises parallellt och väntar tills alla är klara, vilket är användbart för att hämta data från flera källor samtidigt.

I Next.js omges promises av async/await i nästan alla sammanhang, men att förstå hur promises fungerar hjälper vid felsökning av asynkrona flöden och vid läsning av dokumentation.

Ett REST-API exponerar resurser via URL:er och använder HTTP-metoder för att ange operationen: GET hämtar, POST skapar, PUT/PATCH uppdaterar och DELETE tar bort. En väldesignad REST-URL beskriver vad som opereras på, inte vad som görs: /users/42 i stället för /getUser?id=42.

REST är tillståndslöst — varje förfrågan bär all information servern behöver för att svara, utan att servern behöver minnas tidigare förfrågningar.

I Next.js byggs REST-API:er med route handlers. Alternativet GraphQL ger klienten mer kontroll över exakt vilka data som hämtas, vilket minskar over- och under-fetching. tRPC är ett typsäkert alternativ populärt i TypeScript-projekt.

Tree shaking fungerar tack vare ES-modulers statiska import/export-syntax: bundlern kan vid byggtillfället avgöra exakt vilka funktioner som används och utesluta resten. Om du importerar { format } from 'date-fns' ingår bara format i bundeln, inte hela biblioteket.

Effektivt tree shaking kräver att bibliotek är skrivna med ES-moduler och undviker side effects på modulnivå. Next.js kör tree shaking automatiskt via sin bundler — du behöver inte konfigurera något.

Att vara medveten om tree shaking hjälper dig välja bibliotek och skriva egna moduler på ett sätt som håller klientbundeln liten. Undvik namnlösa default-exporter av hela objekt om individuella funktioner importeras separat.