Bắt Đầu với Next.js 14: Hướng Dẫn Toàn Diện

Next.js đã trở thành một trong những framework phổ biến nhất để xây dựng ứng dụng React. Với sự ra đời của App Router trong phiên bản 13, và các cải tiến hơn nữa trong phiên bản 14, việc xây dựng ứng dụng web nhanh chóng, có khả năng mở rộng chưa bao giờ dễ dàng đến thế.

Tại Sao Lại Chọn Next.js?

Next.js mang lại nhiều lợi thế so với việc thiết lập React thuần túy:

• Server-side rendering (SSR) cho SEO tốt hơn và hiệu suất tải trang ban đầu
• Static site generation (SSG) cho các trang tĩnh cực nhanh
• File-based routing trực quan và dễ hiểu
• Built-in API routes cho chức năng backend
• Automatic code splitting để tối ưu hóa hiệu suất

Thiết Lập Dự Án

Bắt đầu với Next.js rất đơn giản. Bạn có thể tạo một dự án mới chỉ với một lệnh:

npx create-next-app@latest my-app

Lệnh này sẽ yêu cầu bạn một số tùy chọn cấu hình:

Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? Yes

Hiểu về App Router

App Router giới thiệu một mô hình mới để xây dựng ứng dụng Next.js. Dưới đây là một component page cơ bản:

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Welcome to my app!</h1>
    </main>
  )
}

Layouts

Layouts cho phép bạn chia sẻ UI giữa các routes. Tạo một file layout.tsx:

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

Dynamic Routes

Tạo dynamic routes bằng cách sử dụng dấu ngoặc vuông trong tên thư mục:

// app/blog/[slug]/page.tsx
interface Props {
  params: { slug: string }
}
 
export default function BlogPost({ params }: Props) {
  return <h1>Post: {params.slug}</h1>
}

Data Fetching

Với App Router, bạn có thể fetch data trực tiếp trong Server Components:

async function getPosts() {
  const res = await fetch('https://api.example.com/posts')
  return res.json()
}
 
export default async function Blog() {
  const posts = await getPosts()
 
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Kết Luận

Next.js 14 mang lại trải nghiệm phát triển xuất sắc trong khi cung cấp hiệu suất vượt trội. Cho dù bạn đang xây dựng một blog đơn giản hay một ứng dụng web phức tạp, Next.js có đầy đủ các công cụ bạn cần.

Trong các bài viết tiếp theo, tôi sẽ đi sâu hơn vào các tính năng cụ thể như:

• Server Actions
• Parallel và intercepted routes
• Streaming và Suspense
• Tối ưu hóa images và fonts

Hãy theo dõi!