Next.js 15: Framework React Cho Production

Next.js 15 vừa ra mắt với nhiều cải tiến đột phá, từ React Server Components ổn định đến turbopack compiler siêu nhanh. Đây là framework full-stack hoàn hảo cho mọi dự án React!

Next.js 15 Có Gì Mới?

1. React Server Components (Stable)

Chú thích: Server Components chạy trên server, không gửi JavaScript xuống client → Trang web nhẹ hơn, nhanh hơn!

RSC giờ đã production-ready với hiệu năng vượt trội:

// app/page.tsx - Server Component by default
async function HomePage() {
  // Fetch data trực tiếp trong component!
  // Không cần useEffect, không cần loading state!
  const posts = await fetch('https://api.example.com/posts')
    .then(res => res.json());
  
  return (
    <div>
      <h1>Blog Posts</h1>
      {posts.map(post => (
        <PostCard key={post.id} {...post} />
      ))}
    </div>
  );
}

// Zero JavaScript shipped to client! ⚡

2. Turbopack Compiler

Chú thích: Turbopack là bundler mới của Vercel, viết bằng Rust (ngôn ngữ siêu nhanh), thay thế Webpack cũ kỹ.

Thay thế Webpack với Turbopack - nhanh hơn 700x:

• ⚡ Cold start (khởi động lần đầu): < 2 giây
• 🔥 Hot reload (cập nhật code real-time): < 100ms
• 📦 Build production: nhanh hơn 5x

# Enable Turbopack
npm run dev --turbo

# Build với Turbopack
npm run build --turbo

App Router: Routing Thế Hệ Mới

File-based Routing

Chú thích: Cấu trúc folder tự động tạo routes! Không cần config router như React Router nữa.

app/
├── page.tsx              # Homepage (/)
├── about/
│   └── page.tsx          # About page (/about)
├── blog/
│   ├── page.tsx          # Blog list (/blog)
│   └── [slug]/           # [slug] = dynamic route
│       └── page.tsx      # Blog post (/blog/bai-viet-1, /blog/bai-viet-2...)
└── dashboard/
    ├── layout.tsx        # Layout bao bọc các page
    └── page.tsx          # Dashboard home

Layouts & Templates

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

// Layout được cache và reuse! 🎯

Server Actions: Backend Trong Frontend

Form Handling Siêu Đơn Giản

// app/actions.ts
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title');
  const content = formData.get('content');
  
  // Gọi database trực tiếp!
  const post = await db.posts.create({
    data: { title, content }
  });
  
  revalidatePath('/blog');
  return { success: true, post };
}

// app/new-post/page.tsx
import { createPost } from './actions';

export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="content" required />
      <button type="submit">Publish</button>
    </form>
  );
}

// Progressive enhancement - works without JS! ✨

Data Fetching & Caching

Automatic Request Deduplication

// Cùng 1 request, fetch 1 lần duy nhất!
async function Header() {
  const user = await getUser(); // Fetch
  return <div>Welcome {user.name}</div>;
}

async function Sidebar() {
  const user = await getUser(); // Reuse cached data! 🚀
  return <nav>{user.preferences}</nav>;
}

Incremental Static Regeneration

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // Revalidate mỗi giờ

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(post => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  return <Article {...post} />;
}

Streaming & Suspense

Progressive Page Rendering

import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      
      {/* Load nhanh */}
      <UserInfo />
      
      {/* Load sau, show skeleton */}
      <Suspense fallback={<ChartsSkeleton />}>
        <Charts />
      </Suspense>
      
      <Suspense fallback={<TableSkeleton />}>
        <DataTable />
      </Suspense>
    </div>
  );
}

// Time to interactive: Cực nhanh! ⚡

Image Optimization

Built-in Image Component

import Image from 'next/image';

export default function Gallery() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority // LCP optimization
      placeholder="blur"
      blurDataURL="/hero-blur.jpg"
    />
  );
}

// Auto optimization:
// - WebP/AVIF conversion
// - Responsive images
// - Lazy loading
// - Blur placeholder

Middleware & Authentication

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  
  // Redirect nếu chưa login
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*']
};

API Routes & Route Handlers

// app/api/posts/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const posts = await db.posts.findMany();
  return NextResponse.json(posts);
}

export async function POST(request: Request) {
  const data = await request.json();
  const post = await db.posts.create({ data });
  return NextResponse.json(post, { status: 201 });
}

// Full REST API support! 🎯

Performance Best Practices

1. Use Server Components

// ✅ Server Component - No JS to client
async function BlogList() {
  const posts = await getPosts();
  return <div>{/* ... */}</div>;
}

// ❌ Client Component - Ships JS
'use client'
function InteractiveBlogList() {
  const [posts, setPosts] = useState([]);
  // ...
}

2. Parallel Data Fetching

// ❌ Sequential - Slow
const user = await getUser();
const posts = await getPosts();
const comments = await getComments();

// ✅ Parallel - Fast! 
const [user, posts, comments] = await Promise.all([
  getUser(),
  getPosts(),
  getComments()
]);

3. Metadata cho SEO

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      images: [post.image],
    },
  };
}

// Perfect SEO! 🎯

Deploy Lên Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy trong 1 lệnh!
vercel

# Production deployment
vercel --prod

# Auto CI/CD với Git integration! 🚀

So Sánh Với Các Framework Khác

Feature	Next.js 15	Create React App	Remix	Gatsby
Server Components	✅	❌	✅	❌
File Routing	✅	❌	✅	✅
API Routes	✅	❌	✅	❌
ISR	✅	❌	❌	✅
Image Optimization	✅	❌	❌	✅
Zero Config	✅	✅	❌	❌

Khi Nào Dùng Next.js?

✅ Nên dùng khi:

• Build marketing website cần SEO tốt
• E-commerce platform
• Dashboard/Admin panels
• Blog hoặc content-heavy sites
• Full-stack applications

⚠️ Có thể không cần khi:

• Simple landing page (dùng HTML/CSS đơn giản)
• Static site không cần dynamic content
• Mobile app (dùng React Native)

Kết Luận

Next.js 15 là framework React hoàn chỉnh nhất hiện nay với:

• ⚡ Performance vượt trội với Turbopack
• 🚀 Server Components cho UX tốt hơn
• 🎯 Developer Experience tuyệt vời
• 📦 Full-stack capabilities
• 🌐 SEO-friendly by default

// Your next project should be:
const nextProject = {
  framework: 'Next.js 15',
  features: ['RSC', 'Server Actions', 'Turbopack'],
  deployment: 'Vercel',
  outcome: '🚀 Blazing fast!'
};

console.log('Start building with Next.js today! 💪');

---

Bạn đã thử Next.js 15 chưa? Chia sẻ trải nghiệm của bạn! 💬

Tags

#NextJS #React #WebDevelopment #FullStack #ServerComponents #JavaScript #TypeScript