NextJS

NextJS cho người mới bắt đầu

Written by huudoanh

Chúng ta có thể làm gì với Next.js?. Thay vì sử dụng PHP, chúng ta sẽ xây dựng ứng dụng với JavaScript và React. Một số tính năng đặc biệt mà Next.js mang lại:

  • Mặc định sử dụng server-rendered (hỗ trợ tốt cho SEO)
  • Tự động tách code để tải trang nhanh hơn
  • Simple client-side routing (page based)
  • Môi trường dev dựa trên Webpack hỗ trợ Hot Module Replacement(HMR)
  • Có thể triên khai với Express hoặc Node.js HTTP server
  • Bạn có thể tuỳ biến với các cấu hình Babel và Webpack

Cài đặt

Next.js có thể chạy trên Windows, Mac và Linux. Bạn chỉ cần cài đặt Node.js trên hệ thống của mình để bắt đầu xây dựng các ứng dụng Next.js.

Bên cạnh đó, bạn cần phải có trình soạn thảo văn bản để viết code và ứng dụng Terminal để thực hiện một số lệnh.

Nếu bạn đang dùng Windows, hãy thử sử dụng PowerShell. Next.js hoạt động với mọi shell hoặc terminal, nhưng chúng tôi sẽ sử dụng một số lệnh dành riêng cho UNIX trong hướng dẫn này. Chúng tôi khuyên bạn nên sử dụng PowerShell để dễ dàng theo dõi.

Để bắt đầu, tạo một dự án mẫu bằng cách chạy các lệnh sau:

mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages

Sau đó mở file package.json trong thư mục hello-next và thay thế các scripts như sau:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Bây giờ mọi thứ đã sẵn sàng. Chạy lệnh sau để khởi động server dev:

npm run dev

Sau đó mở http://localhost:3000 từ trình duyệt của bạn.

Bạn sẽ thấy một trang 404 như thế này:

nextjs cho người mới bắt đầu

Tạo trang đầu tiên

Bây giờ hãy bắt đầu viết trang đầu tiên:

Tạo một file có tên Pages/index.js và thêm nội dung sau:

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

Bây giờ nếu bạn truy cập http://localhost:3000 lần nữa, bạn sẽ thấy một trang có nội dung “Hello Next.js”

Tại đây, chúng tôi đã xuất một React Component đơn giản từ mô-đun page/index.js. Tương tự như vậy, bạn có thể viết React Component của riêng bạn.