Làm quen với Next.js cho người mới bắt đầu

Đối với Next.js thì mình đã nói rất nhiều về khái niệm, chức năng cũng như ưu nhược điểm của nó ở các bài trước, bạn có thể đọc lại tại: Next.js là gì? Tìm hiểu về Next.js.

Một số đặc điểm chính trong Next.js:

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

Next.js hỗ trợ hầu hết các hệ điều hành: Linux, macOS, Windows.

Ta sẽ bắt đầu với Pages, trong Next.js thì trang là thành phần được xuất ra từ .js hoặc tệp nằm trong .jsx. Mỗi trang được liên kết với đường dẫn dựa trên tên tệp của nó.

Ví dụ: Bạn tạo ra pages/index.js như bên dưới thì nó có thể truy cập thông qua /index.

    function Hello() {
      return <div>Hello</div>
    }

    export default Hello

Đối với Next thì nó có cũng cấp định tuyến động, ví dụ bạn tạo ra một file với tên gọi pages/posts/[id].js và sau đó có thể truy cập theo id chẳng hạn: post/1, post/2…

Theo như mặc định thì ở Next.js sẽ cho hiển thị trước mọi trang tức là Next.js tạo trước HTML cho từng trang, thay vì để tất cả được thực hiện bởi JavaScript phía máy khách. Việc làm như vậy giúp mang lại hiệu quả SEO tốt hơn.

Mỗi HTML được tạo liên kết với mã JavaScript cần thiết cho trang đó và khi một trang được tải bởi trình duyệt, mã JavaScript của nó sẽ chạy và làm cho trang tương tác hoàn chỉnh hơn.

Hai hình thức kết xuất trước: Next.js có hai cách để kết xuất trước là: Static Generation and Server-side Rendering. Tạo tĩnh là HTML được tạo tại thời điểm xây dựng và sẽ được sử dụng lại theo từng yêu cầu. Kết xuất phía máy chủ là HTML được tạo theo từng yêu cầu.

Theo mặc định, Next.js kết xuất trước các trang bằng Tạo tĩnh mà không cần tìm nạp dữ liệu. Đây là một ví dụ:

    function About() {
      return <div>About</div>
    }
    export default About

Bên cạnh đó, một số trang yêu cầu tìm nạp dữ liệu bên ngoài để kết xuất trước: nội dung trang của bạn phụ thuộc vào dữ liệu bên ngoài, đường dẫn trang của bạn phụ thuộc vào dữ liệu bên ngoài.

Nếu một trang sử dụng Kết xuất phía máy chủ , thì HTML của trang được tạo theo từng yêu cầu . Để sử dụng Kết xuất phía máy chủ cho một trang, bạn cần exportmột asynchàm được gọi getServerSideProps. Chức năng này sẽ được máy chủ gọi theo mọi yêu cầu.

Ví dụ: trang của bạn cần hiển thị trước dữ liệu được cập nhật thường xuyên (được tìm nạp từ API bên ngoài). Bạn có thể viết getServerSidePropsdữ liệu nào lấy dữ liệu này và chuyển nó vào Pagenhư sau:

    function Page({ data }) {
      // Render data...
    }

    // This gets called on every request
    export async function getServerSideProps() {
      // Fetch data from external API
      const res = await fetch(`https://.../data`)
      const data = await res.json()

      // Pass data to the page via props
      return { props: { data } }
    }

    export default Page