Next.js là một framework phát triển ứng dụng web front-end dựa trên React, mang đến nhiều tính năng mạnh mẽ giúp tăng tốc độ, hiệu suất và khả năng tối ưu hóa SEO cho các ứng dụng web của bạn.
Next.js là một framework được xây dựng trên nền tảng React của Facebook, giúp tối ưu hóa việc render cả phía server (Server-Side Rendering – SSR) và phía client (Client-Side Rendering – CSR). Được phát triển bởi Vercel, Next.js cho phép các nhà phát triển xây dựng các ứng dụng web hiệu suất cao với các tính năng như render trước (pre-rendering), tĩnh hóa (static generation), và chuyển đổi động (dynamic routing).
Khi làm việc với Next.js, các bạn thường nghe nói tới hai khái niệm phổ biến là Server-Side Rendering (SSR) và Static Site Generation (SSG). Vậy điểm khác nhau cơ bản giữa hai loại render này là gì?
SSR là việc render các trang web trên server và gửi kết quả cho client. Điều này giúp cải thiện tốc độ tải trang và làm cho nội dung trang web có thể dễ dàng được các công cụ tìm kiếm index, tối ưu hóa SEO một cách tốt nhất. Trong Next.js, bạn có thể sử dụng hàm getServerSideProps để thực hiện SSR.
export async function getServerSideProps(context) {
// Fetch data from external API
const res = await fetch(`https://.../data`)
const data = await res.json()
// Return the SSR props
return { props: { data } }
}
SSG cho phép tạo ra các trang web tĩnh ngay tại thời điểm build, đảm bảo trang web có tốc độ tải nhanh và khả năng bảo mật cao. Sử dụng SSG, các bạn sẽ tận dụng được lợi thế của các trang tĩnh với nội dung động mà không cần phải đánh đổi về hiệu suất. Trong Next.js, các bạn có thể sử dụng hàm getStaticProps.
export async function getStaticProps() {
// Fetch data from external API
const res = await fetch(`https://.../data`)
const data = await res.json()
// Return the static props
return { props: { data } }
}
Để bắt đầu một dự án mới với Next.js, các bạn cần cài đặt Node.js và npm (hoặc yarn).
Các bạn có thể khởi tạo một dự án mới bằng cách sử dụng create-next-app command:
npx create-next-app my-next-app
Sau khi khởi tạo xong, các bạn có thể vào thư mục dự án và chạy dự án:
cd my-next-app
npm run dev
Một dự án Next.js điển hình sẽ có cấu trúc thư mục như sau:
/pages: Chứa các file page, mỗi file tương ứng với một route trên ứng dụng./public: Chứa các file tĩnh như hình ảnh, font, etc./styles: Chứa các file CSS.Để tạo một trang mới, các bạn chỉ cần tạo một file mới trong thư mục /pages. Ví dụ, tạo file about.js trong thư mục /pages với nội dung sau:
export default function About() {
return (
About PageThis is the about page.
)
}
Sau đó, các bạn có thể truy cập trang này tại /about.
Next.js sử dụng một mô hình routing tự động dựa trên cấu trúc file. Bất kỳ file nào được tạo trong thư mục /pages sẽ tự động trở thành một route. Ví dụ, với file about.js chúng ta vừa tạo, URL sẽ là /about.
Next.js cung cấp một component Link để tạo liên kết giữa các trang:
import Link from 'next/link'
export default function Home() {
return (
Home PageGo to About Page
)
}
Next.js cho phép các bạn xây dựng các API endpoint trực tiếp trong thư mục /pages/api. Các API route này sẽ được server chạy tự động và các bạn có thể sử dụng chúng để cung cấp dữ liệu cho frontend.
Tạo một file mới hello.js trong thư mục /pages/api với nội dung sau:
export default function handler(req, res) {
res.status(200).json({ text: 'Hello' })
}
Sau đó, các bạn có thể truy cập API này tại /api/hello.
Trong một trang frontend, các bạn có thể gọi API này dùng fetch:
export async function getServerSideProps() {
const res = await fetch('http://localhost:3000/api/hello')
const data = await res.json()
return { props: { text: data.text } }
}
export default function Home({ text }) {
return (
Home Page{text}
)
}
Next.js là một công cụ mạnh mẽ và dễ dàng sử dụng cho việc phát triển các ứng dụng web hiện đại với tốc độ cao và tối ưu hóa SEO. Từ các tính năng render phía server đến khả năng tạo trang tĩnh, Next.js cung cấp cho các bạn tất cả những gì cần thiết để xây dựng các ứng dụng web tiên tiến. Các bạn nên thường xuyên cập nhật và tìm hiểu các tài liệu mới nhất để tận dụng tối đa sức mạnh của Next.js trong các dự án phát triển web của mình.
