Next.js 15 -fullstack-kehitys (App Router + Server Actions) · Oppitunti

Turbopackin ja kääntäjän asetusten perusteellinen tarkastelu

Säätäkää Turbopackia, muunnoksia ja SWC-pohjaista kääntäjää nopeampien koontien ja pienemmän tulosteen saavuttamiseksi.

Oppitunti 2/413 vaihetta

Turbopackin ja kääntäjän asetusten perusteellinen tarkastelu on ilmainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.

Miksi Turbopack on olemassa

Next.js 15 toimitetaan siten, että Turbopack on komennon next dev oletusbundleri. Se on rakennettu Rustilla korvaamaan JavaScript-pohjainen Webpack-putki, joka palveli Next.js:ää vuosien ajan.

Webpackin keskeinen ongelma suurissa sovelluksissa oli seuraava: jokainen tiedostomuutos käynnisti JavaScriptillä tehdyn riippuvuusgraafin läpikäynnin ja uudelleenarvioinnin. Kun moduuleja oli 10 000, yhden tiedoston muokkaamista saattoi seurata 8–15 sekunnin odotus ennen kuin HMR-päivitys näkyi selaimessa.

Turbopack ratkaisee tämän kolmen arkkitehtuurivalinnan avulla:

Inkrementaalinen laskenta – vain muutokseen vaikuttavat moduulit arvioidaan uudelleen, ei koko graafia.
Rinnakkainen käännös – Rustin turvallinen rinnakkaisuus mahdollistaa tiedostojen samanaikaisen muuntamisen useilla suoritinytimillä.
Pysyvä välimuisti – muunnosten tulokset tallennetaan levylle, ja ne säilyvät prosessin uudelleenkäynnistysten yli.

Tuloksena suurten sovellusten kylmäkäynnistys nopeutuu noin 50–75 prosenttia, ja HMR-viive jää useimmissa tapauksissa yksinumeroiseksi millisekuntimääräksi.

Turbopackin käyttöönotto tiedostossa next.config.ts

Next.js 15:ssä suositeltu tapa ottaa Turbopack käyttöön kehityksen aikana on next dev --turbopack. Tuotantokoontien oletuksena on edelleen Webpack, kunnes Turbopack saavuttaa täyden yhteensopivuuden, joten voitte hallita asetusta komentokohtaisesti tiedostossa package.json.

Voitte myös määrittää Turbopack-asetukset suoraan tiedoston next.config.ts sisällä avaimen experimental.turbo alle (vakaassa rajapinnassa nimi on turbopack).

Keskeiset huomioitavat asiat:

Avain turbopack vaikuttaa vain komentoon next dev; tuotantokoonti käyttää edelleen Webpackia, ellei komentoon next build välitetä valitsinta --turbopack (v15:ssä kokeellinen).
turbopack-asetukset yhdistetään Turbopackin sisäisiin oletuksiin – koko asetusta ei tarvitse määrittää uudelleen.
TypeScript-asetustiedosto (next.config.ts) tarjoaa näille asetuksille täyden tyyppiturvallisuuden NextConfig-tyypin avulla.

// next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  turbopack: {
    // Turbopack-specific options go here
    // (rules, resolveAlias, resolveExtensions, etc.)
  },
};

export default config;

Turbopack-lataajat: Webpack-sääntöjen korvaaminen

Webpack käytti module.rules-asetusta yhdessä babel-loader- ja raw-loader-lataajien kaltaisten lataajien kanssa. Turbopackissa vastaava asetus on rules turbopack-määrityksen sisällä.

Jokainen sääntö yhdistää tiedostopäätteitä vastaavan glob-kuvion yhteen tai useampaan Turbopack-yhteensopivaan lataajaan. Huomioikaa, että Webpack-lataajat eivät ole suoraan yhteensopivia: Turbopack edellyttää lataajia, jotka toteuttavat sen oman muunnosrajapinnan. Monista suosituista lataajista (esimerkiksi @svgr/webpack ja @mdx-js/loader) on kuitenkin julkaistu Turbopack-yhteensopivat versiot.

Säännön rakenne:

test – glob- tai säännöllisen lausekkeen merkkijono, joka vastaa tiedostopolkuja
use – lataajaolioiden taulukko; jokaisella oliolla on loader-paketin nimi ja valinnainen options-olio

Lataajat suoritetaan oikealta vasemmalle, aivan kuten Webpackissa.

// next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  turbopack: {
    rules: {
      // Transform .svg files into React components
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
      // Transform raw .txt files into string modules
      '*.txt': {
        loaders: ['raw-loader'],
        as: '*.js',
      },
    },
  },
};

export default config;

Moduulialiakset resolveAlias-asetuksella

Polkualiakset mahdollistavat muodon import { Button } from '@ui/Button' käyttämisen muodon ../../components/ui/Button sijaan. Turbopack tukee tätä asetuksella turbopack.resolveAlias, joka vastaa Webpackin asetusta resolve.alias.

Pidä myös tiedoston tsconfig.json paths-asetukset synkronoituina: TypeScript-kääntäjä käyttää paths-asetusta tyyppien tarkistamiseen, kun taas Turbopack käyttää resolveAlias-asetusta paketointiin. Ero asetuksissa aiheuttaa koontivaiheessa "module not found" -virheitä, vaikka tyypit näyttäisivät editorissa oikeilta.

Yleinen toimintatapa on määrittää ensisijainen vastaavuus yhdessä paikassa ja muodostaa molemmat asetukset sen perusteella tai käyttää next/jest-pakettia, joka lukee Jestin käyttöön tsconfig.json-tiedoston paths-asetukset automaattisesti.

// next.config.ts
import type { NextConfig } from 'next';
import path from 'path';

const config: NextConfig = {
  turbopack: {
    resolveAlias: {
      '@ui': path.resolve(__dirname, 'src/components/ui'),
      '@lib': path.resolve(__dirname, 'src/lib'),
      '@server': path.resolve(__dirname, 'src/server'),
    },
  },
};

export default config;

// tsconfig.json (keep in sync)
// {
//   "compilerOptions": {
//     "paths": {
//       "@ui/*": ["./src/components/ui/*"],
//       "@lib/*": ["./src/lib/*"],
//       "@server/*": ["./src/server/*"]
//     }
//   }
// }

SWC: Next.js:n sisäinen kääntäjä

Turbopackin rinnalla Next.js käyttää SWC:tä (Speedy Web Compiler) koodinmuuntimena. Myös SWC on kirjoitettu Rustilla, ja se käsittelee TypeScriptin poistamisen, JSX:n muuntamisen, pienentämisen sekä valinnaiset syntaksimuunnokset.

Tärkeä ero:

Turbopack on bundleri – se muodostaa moduuligraafin, ratkaisee tuonnit ja ohjaa koodin jakamista.
SWC on muunnin – se muuntaa yksittäisiä tiedostoja (TS → JS, JSX → React.createElement-kutsut ja niin edelleen).

Molemmat ovat Next.js 15:ssä oletusarvoisesti käytössä. SWC korvaa Babelin useimmissa projekteissa. Jos repositoriossanne on edelleen .babelrc-tiedosto, Next.js siirtyy käyttämään Babelia ja poistaa SWC:n käytöstä – tämä hidastaa koonteja usein siirretyissä projekteissa.

Varmistaaksenne, että SWC on käytössä, suorittakaa next build ja etsikää tulosteesta teksti "SWC minify".

SWC-muunnosten määrittäminen tiedostossa next.config.ts

SWC-muunnokset määritetään NextConfig-asetuksen ylimmällä tasolla, ei turbopack-asetuksen sisällä. Yleisimmin säädetyt asetukset ovat:

compiler.styledComponents – ottaa styled-components-kirjaston SWC-laajennuksen käyttöön ja lisää näyttönimet sekä deterministiset luokkien nimet.
compiler.emotion – sama Emotion CSS-in-JS -kirjastolle.
compiler.removeConsole – poistaa console.*-kutsut tuotantokooinneista. Voitte sallia tietyt metodit erikseen (esimerkiksi säilyttää console.error-kutsun).
compiler.reactRemoveProperties – poistaa mukautetut React-propsit (kuten data-testid) tuotantotulosteesta ja pienentää HTML-kuormaa.

Nämä muunnokset suoritetaan jokaiselle tiedostolle käännöksen aikana, joten ottamalla käyttöön vain tarvitsemanne asetukset pidätte koontiajat lyhyinä.

// next.config.ts
import type { NextConfig } from 'next';

const isProd = process.env.NODE_ENV === 'production';

const config: NextConfig = {
  compiler: {
    // Remove console.log but keep console.error in production
    removeConsole: isProd
      ? { exclude: ['error', 'warn'] }
      : false,

    // Strip data-testid attributes from JSX in production
    reactRemoveProperties: isProd
      ? { properties: ['^data-testid$'] }
      : false,

    // Enable styled-components SWC plugin
    styledComponents: true,
  },
};

export default config;

SWC:n pienennys verrattuna Terseriin

Next.js 15 käyttää oletusarvoisesti SWC:tä pienentämiseen (swcMinify: true on nyt implisiittinen oletus). Se korvaa Terserin, joka oli vuosien ajan vakiintunut JavaScript-pohjainen pienentäjä.

Vertailumittaus keskikokoisessa Next.js-sovelluksessa (noin 300 moduulia):

Terser: pienennys kestää noin 18 sekuntia komennon next build aikana
SWC:n pienentäjä: noin 3 sekuntia – noin kuusi kertaa nopeampi

SWC:n pienennys huomioi myös näkyvyysalueet ja suorittaa käyttämättömän koodin poiston (DCE) moduulitasolla. Yhdessä bundlerin tree-shakingin kanssa tämä tarkoittaa, että käyttämättömät viennit, jotka Terser olisi saattanut säilyttää, voidaan poistaa.

Jos kohtaatte harvinaisen mutta mahdollisen tapauksen, jossa SWC:n pienennys tuottaa virheellisen tulosteen, voitte siirtyä takaisin Terseriin:

// next.config.ts — only needed if SWC minifier causes issues
import type { NextConfig } from 'next';

const config: NextConfig = {
  // Explicitly disable SWC minification and fall back to Terser
  swcMinify: false,
};

export default config;

// Alternatively, to tune SWC minification behavior:
// (no direct config exposed yet — SWC minifier config is internal)
// The recommended approach is to leave swcMinify: true (default)
// and report any correctness bugs to the Next.js GitHub repo.

Bundle Analyzer: toimitettavan koodin visualisointi

Ennen paketin koon optimointia teidän on nähtävä sen sisältö. @next/bundle-analyzer-paketti käärii webpack-bundle-analyzer-paketin ja integroi sen Next.js-koonteihin.

Kun asetukset on määritetty, komento ANALYZE=true next build avaa selaimessa interaktiivisen treemap-kaavion, joka näyttää jokaisen moduulin ja sen osuuden kustakin JavaScript-chunkista.

Mitä kannattaa etsiä:

Suuret node_modules-paketit – esimerkiksi moment.js (yli 70 kt gzipattuna), kun tarvitsette vain päivämäärien muotoilua. Korvatkaa se paketilla date-fns tai natiivilla Intl.DateTimeFormat-ratkaisulla.
Päällekkäiset paketit – jos treemap-kaaviossa näkyy kaksi versiota paketista react tai lodash, se viittaa riippuvuuksien ratkaisemiseen liittyvään ristiriitaan.
Palvelin- ja asiakaspuolen chunkit – palvelimelle kuuluvaa koodia on vuotanut asiakaspuolen pakettiin (esimerkiksi tietokanta-asiakas).

Huomio: bundle-analyzer toimii tällä hetkellä Webpack-koonnin kanssa (next build ilman valitsinta --turbopack). Turbopack-natiivi analysointityökalu on suunnitteilla.

// next.config.ts
import type { NextConfig } from 'next';
import bundleAnalyzer from '@next/bundle-analyzer';

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: true,
});

const config: NextConfig = {
  // ... your other config
};

export default withBundleAnalyzer(config);

// package.json script:
// "analyze": "ANALYZE=true next build"

Turbopackin pysyvän välimuistin määritys

Turbopackin pysyvä välimuisti tallentaa muunnos- ja paketointitulokset hakemistoon .next/cache/turbopack. Toisella next dev -suorituskerralla (tai CI-ympäristössä välimuistin palauttamisen jälkeen) Turbopack lukee tiedot levyltä uudelleenlaskennan sijaan, mikä lyhentää CI-putkien kylmäkäynnistystä huomattavasti.

Keskeiset toimintaperiaatteet:

Välimuisti on sisältöosoitteistettu: tiedoston välimuistiavain muodostuu sen sisällön sekä kaikkien sen riippuvuuksien sisällön hajautusarvosta. Vanhentunutta välimuiniosumaa ei voi syntyä.
Välimuistihakemisto voi kasvaa ajan myötä suureksi. next dev käyttää sisäistä LRU-poistokäytäntöä, mutta voitte tyhjentää välimuistin manuaalisesti komennolla rm -rf .next/cache/turbopack.
CI-ympäristössä tallentakaa .next/cache-hakemisto suorituskertojen välillä. GitHub Actions -esimerkki:

# .github/workflows/ci.yml (relevant excerpt)
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Restore Next.js cache
        uses: actions/cache@v4
        with:
          path: |
            ~/.npm
            ${{ github.workspace }}/.next/cache
          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.ts','**/*.tsx') }}
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

      - run: npm ci
      - run: npm run build

Koodin jaon sekä chunk-strategian hallinta

Next.js jakaa koodin automaattisesti reittitasolla (jokainen sivu saa oman JS-chunkinsa), mutta voit vaikuttaa jakamiseen vielä kahdella tekniikalla:

1. Dynaamiset importit (next/dynamic) — lataa raskaat komponentit laiskasti, jolloin ne jäävät pois sivun alkuperäisestä bundlesta. Tämä on ensisijainen työkalu First Load JS -koon pienentämiseen.

2. optimizePackageImports — Next.js 15:n määritysasetus, joka käskee kääntäjää tekemään tree-shakeningin tietyille paketeille, joilla ei ole asianmukaisia ESM-vientejä. Kirjastot, kuten lucide-react, @radix-ui/* ja ikonipaketit, hyötyvät tästä usein.

Molemmat tekniikat toimivat Turbopackin ja Webpackin kanssa. optimizePackageImports on erityisen tehokas, koska se ei edellytä muutoksia import-lauseisiin — se on pelkkä bundlerin vihje.

// next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  // Tell the compiler to tree-shake these packages
  // even if they lack proper ESM export maps
  experimental: {
    optimizePackageImports: [
      'lucide-react',
      '@radix-ui/react-icons',
      'recharts',
      '@heroicons/react',
    ],
  },
};

export default config;

// In your component — no change needed:
// import { ChevronRight, User } from 'lucide-react';
// Only ChevronRight and User are bundled, not the full icon library.

Koontiversion suorituskyvyn mittaaminen komennolla next build --profile

Kun koontiversioiden ajat kasvavat yllättäen, Next.js tarjoaa sisäänrakennetun profiloinnin pullonkaulojen paikantamiseen. Kaksi lippua ovat erityisen hyödyllisiä:

next build --profile — tuottaa React-profilointijäljen ja .cpuprofile-tiedoston, jonka voit avata Chromen DevToolsissa nähdäksesi, mitkä muunnokset tai liitännäiset kuluttavat aikaa.
NEXT_TELEMETRY_DEBUG=1 next build — tulostaa yksityiskohtaisen aikajaon vaiheittain (käännös, tyyppien tarkistus, staattinen generointi jne.) vakiotulosteeseen.

Erityisesti Turbopackia käytettäessä --turbopack-lippu näyttää pääteulosteessa käännösajat reittisegmenteittäin. Jos yhden reitin käsittely kestää suhteettoman kauan, syynä on usein puuttuva resolveAlias, jolloin Turbopack joutuu käymään syvän suhteellisen polun läpi jokaisella HMR-kierroksella.

Käytännön työnkulku: suorita profilointi → tunnista hitain vaihe → tee asiaankuuluva määritysmuutos → mittaa uudelleen. Älä koskaan arvaa optimointeja monimutkaisen bundlerin kanssa.

// scripts/build-perf.ts — a small helper to time build phases
// Run with: npx ts-node scripts/build-perf.ts

import { execSync } from 'child_process';

function timed(label: string, cmd: string): void {
  const start = Date.now();
  console.log(`\n>>> Starting: ${label}`);
  try {
    execSync(cmd, { stdio: 'inherit', env: { ...process.env } });
  } catch {
    console.error(`[FAILED] ${label}`);
    process.exit(1);
  }
  const elapsed = ((Date.now() - start) / 1000).toFixed(2);
  console.log(`<<< Done: ${label} in ${elapsed}s`);
}

timed('Type check', 'npx tsc --noEmit');
timed('Next.js build', 'npx next build');

Tietotesti: Turbopack-loaderit ja Webpack-loaderit

Testaa ymmärryksesi Turbopackin ja Webpackin loader-järjestelmien keskeisestä erosta Next.js 15:ssä.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin kertaus: Turbopack ja kääntäjän määritykset

Tässä oppitunnissa tutustuit Next.js 15:n kääntäjä- ja bundler-määritysten koko kokonaisuuteen:

Turbopack-arkkitehtuuri — inkrementaalinen laskenta, rinnakkaiset Rust-työntekijät ja pysyvä levyvälimuisti tekevät siitä kehitystyönkulkujen aikana huomattavasti Webpackia nopeamman.
turbopack-määrityslohko — käytä rules-asetusta tiedostotason muunnoksiin, resolveAlias-asetusta moduulipolkujen lyhenteisiin ja pidä tsconfig.json-polut synkronoituna tyyppi- ja bundle-ristiriitojen välttämiseksi.
SWC muuntajana — Turbopackista (bundlerista) erillinen SWC vastaa TS:n karsimisesta, JSX:stä ja minimoinnista. Projektin .babelrc poistaa SWC:n käytöstä huomaamatta.
compiler-asetukset — removeConsole, reactRemoveProperties ja CSS-in-JS-liitännäiset määritetään ylimmän tason compiler-avaimessa, ei turbopack-avaimen sisällä.
Bundlen analysointi — visualisoi chunkien koostumus @next/bundle-analyzer-paketilla ja löydä suuret riippuvuudet tai palvelinkoodin vuotaminen asiakasbundleihin.
optimizePackageImports — muutoksia koodiin edellyttämätön vihje, joka mahdollistaa tree-shakeningin paketeille, joiden ESM-vientikartat ovat puutteelliset.
CI-välimuisti — välimuistita .next/cache ajokertojen välillä hyödyntääksesi Turbopackin pysyvää välimuistia ja lyhentääksesi CI-koontiversioiden aikoja merkittävästi.

Keskeinen ajatusmalli: Turbopack hallitsee graafia, SWC hallitsee tiedostoja, ja next.config.ts on molempien ainoa hallintapiste.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 22
Oppitunnit: 88

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Turbopackin ja kääntäjän asetusten perusteellinen tarkastelu” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolun 3 oppituntia, myös oppitunnin “Turbopackin ja kääntäjän asetusten perusteellinen tarkastelu”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Turbopackin ja kääntäjän asetusten perusteellinen tarkastelu”?

Säätäkää Turbopackia, muunnoksia ja SWC-pohjaista kääntäjää nopeampien koontien ja pienemmän tulosteen saavuttamiseksi. Harjoittelet Next.js 15 -fullstack-kehitys (App Router + Server Actions)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Next.js 15 -fullstack-kehitys (App Router + Server Actions)-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Turbopackin ja kääntäjän asetusten perusteellinen tarkastelu”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunnilla?

Kyllä. Jokainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Asiakasbundlen analysointi ja pienentäminen
Turbopackin ja kääntäjän asetusten perusteellinen tarkastelu
Moduulirajat server-only- ja client-only-määrityksillä
Dynaamiset tuonnit, koodin pilkkominen ja laiska hydraatio

← Takaisin: Next.js 15 -fullstack-kehitys (App Router + Server Actions)