Tìm hiểu về framework NextJS

Nếu bạn đã từng làm việc với front-end, chắc hẳn bạn đã nghe đến khái niệm Server Side Render (SSR). Trong bài viết này, chúng ta sẽ tìm hiểu về một framework phổ biến hỗ trợ tối đa và tối ưu hoá quá trình phát triển một ứng dụng SSR, đó là NextJS.

Next.js là gì?

Next.js là một framework front-end React được phát triển dưới dạng mã nguồn mở, bổ sung các khả năng tối ưu hóa như render phía máy chủ (SSR) và tạo trang web tĩnh. Next.js được xây dựng trên thư viện React, có nghĩa là các ứng dụng Next.js chỉ cần sử dụng nhân React và bổ sung các tính năng khác. Việc triển khai ứng dụng SSR cho phép máy chủ truy cập và xử lý JavaScript để hiển thị trang web nguyên gốc. Sau đó, trang web được gửi lại cho trình duyệt và hiển thị ngay lập tức. Việc sử dụng SSR giúp tăng trải nghiệm người dùng với khả năng phản hồi nhanh hơn.

Ngoài ra, việc sử dụng SSR cũng mang lại lợi thế về SEO. Trang web được render phía máy chủ tải nhanh hơn và có nhiều nội dung hơn để quét bởi các công cụ SEO. Thẻ trong Next.js cho phép bạn chỉnh sửa metadata của trang web, điều mà bạn không thể làm trong React. Thẻ là một phần quan trọng trong việc xếp hạng SEO của trang web.

Tại sao sử dụng Next.js?

Ưu điểm chính của Next.js là hỗ trợ tích hợp SSR để tăng hiệu suất và SEO. Với việc render phía máy chủ, ứng dụng Next.js tải nhanh hơn đáng kể so với ứng dụng React. Ngoài ra, Next.js cũng hỗ trợ các tính năng cho trang web tĩnh. Đối với những ai đã làm việc với React, việc học Next.js sẽ rất dễ dàng. Nó cung cấp các tính năng như code splitting tự động cho các trang, hỗ trợ xây dựng các API internal thông qua các API routes tích hợp sẵn và dễ dàng tùy chỉnh theo nhu cầu của trang web cụ thể.

Tuy nhiên, Next.js cũng có một số điểm yếu. Nó là một framework được cố định với một phương pháp và bộ công cụ cụ thể. Tuy nhiên, phạm vi của Next.js phù hợp với hầu hết các dự án.

Khi nào sử dụng Next.js?

Next.js phù hợp nhất để phát triển trang chủ hoặc trang đích được tối ưu hóa và các trang web dựa trên lưu lượng truy cập tìm kiếm tự nhiên. Những trang này sẽ hưởng lợi lớn từ cải tiến SEO của Next.js. Next.js cũng có hiệu suất tốt hơn so với các ứng dụng web khác vì việc sử dụng SSR cho phép nó có hiệu suất ổn định trên tất cả các thiết bị khách hàng.

Next.js không được khuyến nghị cho các ứng dụng web nặng, yêu cầu bảo mật cao hoặc yêu cầu xác thực phức tạp. Điều này vì SSR không có lợi cho các trang web yêu cầu xác thực phía máy chủ.

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

Trong phần này, chúng ta sẽ giới thiệu 5 thành phần cơ bản của NextJS. Trước khi đi vào chi tiết từng khái niệm, chúng ta cần cài đặt NodeJS để tạo và chạy ứng dụng NextJS trên máy tính. Cài đặt NodeJS rất đơn giản và bạn có thể tìm hiểu cách cài đặt trên Google. Lưu ý cần cài đặt phiên bản NodeJS từ 12.0.0 trở lên.

NextJS hỗ trợ cả JavaScript và TypeScript nên bạn có thể khởi tạo project theo ngôn ngữ mà bạn muốn phát triển.

Với JavaScript: npx create-next-app Với TypeScript: npx create-next-app -typescript

Sau khi tạo xong ứng dụng NextJS, bạn vào file package.json để tìm hiểu các script để chạy ứng dụng NextJS.

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

• dev: Khởi động Next.js trong chế độ phát triển.
• start: Khởi động Next.js trong chế độ sản phẩm.
• build: Xây dựng ứng dụng Next.js để triển khai lên môi trường sản phẩm.

Nếu bạn chạy ứng dụng bằng lệnh next dev, bạn sẽ thấy trang Next.js mặc định trên http://localhost:3000.

Cấu trúc thư mục trong Next.js

Next.js sử dụng cấu trúc thư mục tối giản để giữ cho dự án gọn gàng. Cấu trúc thư mục bắt đầu với 3 thư mục: pages, public và styles.

Dưới đây là ví dụ về cấu trúc thư mục trong một dự án Next.js mới:

• pages

  • api
    • hello.js
  • _app.js
  • index.js

• public

  • favicon.ico
  • vercel.svg

• styles

  • globals.css
  • Home.module.css

• pages: Thư mục này chứa các tệp trang. Mỗi tệp trong thư mục pages là một React Component với một đường dẫn duy nhất được tạo tự động từ tên tệp. Ví dụ, tệp hello.js sẽ được tìm thấy tại page/hello.js.

• public: Thư mục này dành cho việc phân phối các tệp tĩnh. Các tệp trong thư mục public không thay đổi và chỉ có thể được tham chiếu. Thư mục này thường chứa hình ảnh hoặc biểu tượng mà trang web sử dụng cũng như các tệp tin tức như Xác minh trang web của Google.

• styles: Thư mục này chứa các tệp CSS của toàn bộ ứng dụng. Tệp globals.css thiết lập tiêu chuẩn chung được sử dụng bởi tất cả các trang trong dự án. Bạn cũng có thể tạo các tệp CSS riêng cho từng component bằng cách sử dụng các tệp module có hậu tố .module.css.

Định tuyến (Routing/Navigation) trong ứng dụng

Định tuyến cho phép người dùng điều hướng giữa các trang web trong Next.js. Next.js cung cấp các phương pháp định tuyến và liên kết để xác định cách điều hướng trang web.

Index

Trong Next.js, các tệp như index.js được chuyển đến root point của ứng dụng (/) thay vì /index. Bạn có thể tận dụng điều này bằng cách tạo nhiều tệp index để làm trang đích hoặc điểm bắt đầu cho các đường dẫn điều hướng khác nhau trong trang web của bạn. Ví dụ:

• pages
  • index.js # truy cập tại /
  • users
    • index.js # truy cập tại /users
    • account.js # truy cập tại /users/account

Trong ví dụ trên, tệp index.js đầu tiên là trang chủ của trang web và sẽ được truy cập nếu không có đường dẫn điều hướng khác được nhập. Tệp index.js thứ hai nằm dưới thư mục users và sẽ là trang đích cho đường dẫn /users, nhập dưới dạng /users.

Nested Routes

Nested routes là các route chỉ có thể truy cập thông qua một route mẹ được chia sẻ, chẳng hạn như /user/account. Bạn có thể hiểu các nested routes như các tệp lồng nhau trên máy tính của bạn, trong đó bạn phải đi qua tất cả các component cao hơn để đến được component lồng nhau.

Dynamic Routes

Next.js cung cấp chức năng dynamic routes, cho phép tạo ra các trang web với đường dẫn động. Ví dụ, bạn có thể tạo trang chi tiết của một người dùng khi nhấp vào một người dùng trong danh sách:

• pages
  • users
    • index.js
    • [account.js] # truy cập tại /users/[accountName]

Lúc này, bạn có thể tạo trang chi tiết của một người dùng và truy cập nó qua URL: /users/[accountName].

Link

Link là một thành phần của Next.js cho phép người dùng điều hướng giữa các trang web. Để sử dụng link, bạn có thể sử dụng cú pháp sau:

import Link from 'next/link'

function Home() {
  return (
    

      

        
          Home
        
      
      

        
          About Us
        
      
      

        
          Blog Post
        
      
    
  )
}

export default Home

Link có thể nhận các thuộc tính sau:

• href: Đường dẫn hoặc URL để điều hướng đến.
• as: Tùy chọn decorator cho đường dẫn sẽ hiển thị trong thanh URL của trình duyệt.
• passHref: Buộc Link gửi thuộc tính href đến các con của nó. Mặc định là false.
• replace: Thay thế trạng thái history hiện tại thay vì thêm URL mới vào stack. Mặc định là false.
• scroll: Cuộn lên đầu trang sau khi điều hướng. Mặc định là true.
• shallow: Cập nhật đường dẫn của trang hiện tại mà không cần chạy lại các hàm nhận dữ liệu từ server hoặc tĩnh. Mặc định là false.

Như vậy, đó là một số khái niệm cơ bản về Next.js. Trong phần tiếp theo, chúng ta sẽ đi sâu vào các khái niệm và cách hoạt động của chúng trong Next.js.