Hướng dẫn NextJS cho người mới bắt đầu
Next.js là một framework mạnh mẽ dựa trên React, giúp bạn xây dựng các ứng dụng web hiện đại với khả năng tối ưu hóa SEO, hiệu năng cao và các tính năng tích hợp sẵn như Server-Side Rendering (SSR), Static Site Generation (SSG), và API Routes.
Bài viết này sẽ hướng dẫn bạn các bước cơ bản để bắt đầu với Next.js.

1. Cài Đặt Môi Trường
Yêu cầu:
Node.js: Tải về và cài đặt từ Node.js.
npm hoặc yarn: Được cài đặt sẵn khi bạn cài Node.js.
Khởi tạo dự án Next.js:
Sử dụng lệnh sau để tạo một dự án Next.js mới:
Lựa chọn các cấu hình theo ý thích (TypeScript, ESLint, Tailwind CSS, v.v.).
Di chuyển vào thư mục dự án:
Chạy ứng dụng:
Truy cập ứng dụng tại http://localhost:3000.
2. Cấu Trúc Thư Mục Next.js
Khi bạn tạo một dự án Next.js, cấu trúc thư mục cơ bản sẽ như sau:
Thư mục quan trọng:
pages
: Mỗi file trong thư mục này sẽ tự động trở thành một route.public
: Các tài nguyên tĩnh trong thư mục này có thể truy cập qua URL.styles
: Chứa các file CSS để định dạng giao diện.
3. Tạo Trang Đầu Tiên
Tạo một trang đơn giản:
Tạo file about.js
trong thư mục pages
:
Truy cập http://localhost:3000/about để xem trang.
Trang chính (index.js
):
index.js
):File index.js
trong thư mục pages
là trang mặc định (home page):
4. Styles với CSS
Thêm CSS toàn cục:
Trong file styles/globals.css
, bạn có thể định nghĩa CSS áp dụng cho toàn bộ ứng dụng:
Đừng quên nhập file này trong _app.js
:
CSS module:
Next.js hỗ trợ CSS module để quản lý CSS cục bộ:
Sử dụng trong component:
5. API Routes
Next.js hỗ trợ xây dựng API dễ dàng. Tạo file hello.js
trong thư mục pages/api
:
Truy cập http://localhost:3000/api/hello để xem API phản hồi.
6. Data Fetching
Next.js hỗ trợ nhiều phương thức để lấy dữ liệu:
Server-Side Rendering (SSR):
Lấy dữ liệu trên server trước khi render trang:
Static Site Generation (SSG):
Lấy dữ liệu tại thời điểm build:
7. Triển Khai Ứng Dụng
Triển khai ứng dụng Next.js rất dễ dàng với Vercel, nền tảng được thiết kế để tối ưu hóa cho Next.js.
Các bước triển khai:
Đăng ký tài khoản trên Vercel.
Kết nối dự án với GitHub/GitLab/Bitbucket.
Chọn repository và cấu hình Next.js.
Nhấn "Deploy" để hoàn tất.
Kết Luận
Next.js là một framework mạnh mẽ và dễ sử dụng, phù hợp cho cả người mới bắt đầu lẫn các dự án lớn. Với các tính năng hiện đại như SSR, SSG, và API Routes, bạn có thể xây dựng các ứng dụng web tối ưu, hiệu quả và dễ bảo trì.
Hãy thử ngay hôm nay và tận hưởng trải nghiệm lập trình với Next.js!
Last updated
Was this helpful?