Next.js 15 & React 19 - Những Thay Đổi Quan Trọng và Hướng Dẫn Migration

Server Components, Actions và Performance

Phát triển9 tháng 12, 2025Trần Hoàng Phúc · Biên tập viên
Next.js 15 & React 19 - Những Thay Đổi Quan Trọng và Hướng Dẫn Migration

Next.js 15 kết hợp với React 19 mang đến nhiều cải tiến đột phá: React Compiler, Server Actions ổn định, Partial Prerendering. Hướng dẫn chi tiết cách upgrade từ Next.js 14 và tận dụng các tính năng mới.

Next.js 15 + React 19: Những thay đổi bạn cần biết

Sau gần một năm phát triển, Next.js 15 đã chính thức ra mắt với nhiều tính năng đột phá. Kết hợp với React 19, đây là bản cập nhật lớn nhất kể từ App Router.

🆕 Điểm mới trong Next.js 15

1. React Compiler (Experimental)

Tự động memoize components và hooks, không cần useMemo, useCallback thủ công:


// Trước đây - cần memo thủ công
const MemoizedComponent = memo(function Component({ data }) {
  const processed = useMemo(() => expensiveCalc(data), [data]);
  return <div>{processed}</div>;
});
// React 19 + Compiler - tự động optimize function Component({ data }) { const processed = expensiveCalc(data); return <div>{processed}</div>; }

2. Partial Prerendering (PPR)

Kết hợp static và dynamic rendering trong cùng một page:


// Static shell được serve ngay lập tức
// Dynamic parts được stream sau
export default async function ProductPage({ params }) {
  return (
    <div>
      <StaticHeader />
      <Suspense fallback={<Skeleton />}>
        <DynamicProductDetails id={params.id} />
      </Suspense>
    </div>
  );
}

3. Server Actions ổn định

Không còn experimental, sẵn sàng cho production:


// app/actions.ts
"use server"
export async function createPost(formData: FormData) { const title = formData.get("title"); await db.posts.create({ title }); revalidatePath("/posts"); }

4. Caching mặc định thay đổi

Quan trọng: fetch requests không còn cache mặc định:


// Next.js 14: cached by default
// Next.js 15: no-store by default

// Cần explicit cache
fetch(url, { cache: "force-cache" });

// Hoặc dùng unstable_cache import { unstable_cache } from "next/cache"; const getCachedData = unstable_cache(fetchData, ["key"]);

⚛️ React 19 Highlights

1. use() Hook


import { use } from "react";
function Comments({ commentsPromise }) { const comments = use(commentsPromise); return comments.map(c => <Comment key={c.id} {...c} />); }

2. Actions trong Forms


function Form() {
  async function handleSubmit(formData) {
    "use server";
    await saveData(formData);
  }
return ( <form action={handleSubmit}> <input name="email" /> <button type="submit">Submit</button> </form> ); }

3. useOptimistic & useFormStatus


import { useOptimistic, useFormStatus } from "react";
function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>{pending ? "Saving..." : "Save"}</button>; }

🔄 Hướng dẫn Migration từ Next.js 14

  1. Update dependencies: 
    npm install next@15 react@19 react-dom@19
  2. Chạy codemod: 
    npx @next/codemod@canary upgrade latest
  3. Review caching strategy - thêm explicit cache nếu cần
  4. Test toàn bộ app, đặc biệt các async components

📊 Performance Benchmarks

MetricNext.js 14Next.js 15Improvement
Cold Start350ms280ms20% faster
Build Time45s38s15% faster
Bundle Size95KB82KB14% smaller

🎯 Kết luận

Next.js 15 + React 19 là combo mạnh mẽ cho production apps. Với React Compiler và PPR, performance được cải thiện đáng kể mà không cần thay đổi nhiều code. Hãy bắt đầu migrate ngay hôm nay!

Next.jsReactFrontendJavaScript
Từ khoá:
nextjs 15react 19server componentsmigration guide