Komma igång med Next.js 15
Tillbaka till artiklar
React2024-01-158 min

Komma igång med Next.js 15

Next.js 15 introducerar en rad nya funktioner som gör det enklare än någonsin att bygga moderna, snabba webbapplikationer. I den här guiden går vi igenom de viktigaste nyheterna och hur du kommer igång.

App Router - Det nya standardet

App Router har nu blivit stabilt och är det rekommenderade sättet att bygga Next.js-applikationer. Den erbjuder:

- **Server Components som standard** - Bättre performance och mindre JavaScript - **Layouts och nesting** - Enklare att dela komponenter mellan sidor - **Streaming och Suspense** - Progressiv rendering för bättre UX

#Grundläggande struktur

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="sv">
      <body>{children}</body>
    </html>
  )
}

Server Actions

En av de mest spännande funktionerna är Server Actions - ett sätt att köra serverlogik direkt från dina komponenter:

'use server'

export async function createPost(formData: FormData) { const title = formData.get('title') // Spara i databas return { success: true } } ```

Detta eliminerar behovet av separata API-routes för många use cases och gör utvecklingen snabbare.

Optimerad bildhantering

Next.js 15 har förbättrat next/image komponenten med automatisk optimering och lazy loading:

import Image from 'next/image'

Hero ```

Metadata API

SEO har aldrig varit enklare med det nya Metadata API:

export const metadata = {
  title: 'Min sida',
  description: 'En fantastisk webbplats',
}

Sammanfattning

Next.js 15 är ett stort steg framåt för React-utvecklare. Med Server Components, Server Actions och förbättrad performance får du verktyg för att bygga snabba, moderna webbapplikationer.