Bắt đầu với Next.js 15

Next.js 15 là phiên bản mới nhất của framework React mang đến những tính năng mạnh mẽ để xây dựng các ứng dụng web hiện đại. Trong hướng dẫn này, chúng ta sẽ khám phá các khái niệm chính và giúp bạn bắt đầu hành trình Next.js.

Next.js là gì?

Next.js là một framework React cung cấp:

• Server-Side Rendering (SSR): Cải thiện SEO và hiệu suất
• Static Site Generation (SSG): Pre-render các trang tại thời điểm build
• API Routes: Xây dựng chức năng backend cùng với frontend
• File-based Routing: Định tuyến tự động dựa trên cấu trúc file
• Tối ưu hóa tích hợp: Tối ưu hình ảnh, code splitting và nhiều hơn nữa

App Router vs Pages Router

Next.js 15 sử dụng App Router làm mặc định, được xây dựng trên React Server Components. Điều này cung cấp:

• Hiệu suất tốt hơn với Server Components
• Cải thiện các pattern fetch dữ liệu
• Trải nghiệm developer tốt hơn
• Layouts và loading states tích hợp

Tạo trang đầu tiên

Trong App Router, các trang được tạo bằng file page.tsx:

TypeScript

// app/page.tsx
export default function HomePage() {
  return (
    <div>
      <h1>Chào mừng đến với Next.js!</h1>
    </div>
  );
}

Server Components

Server Components chạy trên server, giảm JavaScript bundle gửi đến client:

TypeScript

// Điều này chạy trên server
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
 
  return <div>{json.title}</div>;
}

Client Components

Khi bạn cần tính tương tác, sử dụng directive 'use client':

TypeScript

'use client';
 
import { useState } from 'react';
 
export default function ClientComponent() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(count + 1)}>
      Số đếm: {count}
    </button>
  );
}

Các bước tiếp theo

1. Khám phá tài liệu Next.js
2. Thử xây dựng một dự án mẫu
3. Tìm hiểu về các pattern fetch dữ liệu
4. Thử nghiệm với Server và Client Components

Chúc bạn code vui vẻ!