Site icon Bệ Phóng Việt

Next.js bài 1: Dùng Next.js cho việc phát triển ứng dụng web Frontend

jphopeblog
Advertisements

Next.js là một framework JavaScript cho phát triển ứng dụng web Frontend. Nó giúp cho việc phát triển ứng dụng web đơn giản hơn với tính năng tối ưu hóa dựa trên máy chủ (server-side rendering) và nhiều tính năng hữu ích khác. Trong bài học này, chúng ta sẽ tìm hiểu cách bắt đầu với Next.js để phát triển ứng dụng web Frontend.

Cài đặt Next.js

Để bắt đầu với Next.js, trước tiên bạn cần cài đặt Node.js và npm. Sau đó, bạn có thể tạo một ứng dụng mới bằng lệnh sau:

npx create-next-app my-app

Lệnh này sẽ tạo một ứng dụng mới với tên là “my-app”. Sau khi hoàn tất, bạn có thể chạy ứng dụng bằng lệnh:

cd my-app
npm run dev

Ứng dụng của bạn sẽ được chạy trên cổng 3000. Bạn có thể truy cập vào đó bằng trình duyệt web bằng địa chỉ http://localhost:3000.

Cấu trúc thư mục

Next.js có một cấu trúc thư mục đơn giản cho ứng dụng. Các tệp tin và thư mục chính bao gồm:

  1. pages/: Chứa các trang của ứng dụng. Mỗi tệp trong thư mục này đại diện cho một trang, được tạo ra dựa trên tên tệp.
  2. public/: Chứa các tệp tĩnh như hình ảnh, css, javascript, …
  3. styles/: Chứa các file css.

Tính năng tối ưu hóa dựa trên máy chủ

Next.js hỗ trợ tính năng tối ưu hóa dựa trên máy chủ (SSR) cho phép tải trang nhanh hơn bằng cách tạo HTML từ phía máy chủ. Điều này giúp cho tốc độ tải trang được cải thiện đáng kể.

Ví dụ, bạn có thể tạo một trang đơn giản với đoạn mã sau:

function Home(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Welcome to Next.js</p>
    </div>
  )
}

export async function getServerSideProps(context) {
  return {
    props: {
      name: 'World'
    }
  }
}

export default Home;

Giải thích thêm về tính năng tối ưu hoá trên máy chủ

Tính năng tối ưu hóa dựa trên máy chủ” của Next.js cho phép phía máy chủ quyết định xem đâu là trang nên được tải trước, đâu là trang nên được tải khi cần thiết và đâu là trang không cần thiết để tải. Điều này giúp giảm thời gian tải và tăng tốc độ tải trang của ứng dụng web.

Khi một trang được truy cập, Next.js sẽ tiến hành tải trước các trang liên quan dựa trên trình đơn đường dẫ. Next.js sẽ tạo một danh sách các trang đã được tải trước đó. Khi người dùng chuyển đến một trang khác, Next.js sẽ sử dụng danh sách trang đã tải trước đó để quyết định xem trang nào nên được tải trước. Next,js cũng quyết định trang nào nên được tải khi cần thiết và trang nào không cần thiết để tải.

Tối ưu hóa động (dynamic optimization)

Ngoài ra, Next.js cũng cho phép phía máy chủ thực hiện tối ưu hóa động (dynamic optimization) dựa trên yêu cầu của người dùng.

Khi một người dùng truy cập trang web, Next.js sẽ sử dụng thông tin về yêu cầu của người dùng để quyết định xem trang nào nên được tải trước, trang nào nên được tải khi cần thiết và trang nào không cần thiết để tải.

Ví dụ, nếu một người dùng thường xuyên truy cập vào trang A, thì Next.js sẽ tải trước trang A cho người dùng đó. Khi người dùng chuyển đến trang khác, Next.js sẽ tự động tải trang khác đó, đồng thời giải phóng bộ nhớ của trang A. Điều này giúp tăng tốc độ tải trang và giảm tải cho máy chủ.

Bài tiếp theo: Next.js bài 2: Thực hiện xác thực người dùng với Next.js và Axios

Exit mobile version