Web DevelopmentNổi bật

Next.js 15 App Router Features

Le Van B

Senior Developer

12 tháng 1, 202512-01

987 lượt xem987

#Next.js#App Router#Server Components#React

Next.js 15 App Router Features

Next.js 15 mang đến nhiều cải tiến đáng chú ý cho App Router.

Server Components mặc định

Tất cả component giờ đây là Server Component theo mặc định:

TypeScript

// app/page.tsx - Server Component
import { Suspense } from 'react';
import UserList from './UserList';

export default async function HomePage() {
  const users = await fetch('https://api.example.com/users')
    .then(r => r.json());
  
  return (
    <div>
      <h1>Danh sách người dùng</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <UserList users={users} />
      </Suspense>
    </div>
  );
}

Next.js App Router

API Routes mới

TypeScript

// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const page = searchParams.get('page') || '1';
  
  const users = await getUsersFromDB(parseInt(page));
  
  return NextResponse.json(users);
}