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 không xa lạ với khái niệm Server Side Render (SSR). Trong bài viết này, mình xin giới thiệu về một framework phổ biến có thể hỗ trợ bạn tối đa trong quá trình phát triển một ứng dụng Server Side Render – đó chính là NextJS.

Có thể bạn quan tâm

Contents

1 Next.js là gì?
2 Tại sao sử dụng Next.js?
3 Khi nào sử dụng Next.js?
4 Bắt đầu với Next.js
5 Cấu trúc thư mục trong Next.js
6 Định tuyến và điều hướng trong ứng dụng Next.js
7 Kết luận

Next.js là gì?

Next.js là một framework front-end React được phát triển dựa trên mã nguồn mở. Nó bổ sung thêm 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 xây dựng trên thư viện React, nghĩa là các ứng dụng Next.js sử dụng core của React và chỉ thêm các tính năng bổ sung.

Bạn đang xem: Tìm hiểu về framework NextJS

Triển khai ứng dụng SSR cho phép máy chủ xử lý JavaScript và truy cập tất cả dữ liệu được yêu cầu để hiển thị trang. Sau đó, trang được gửi lại toàn bộ cho trình duyệt và ngay lập tức hiển thị. SSR giúp các trang web tải nhanh hơn và 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, giúp trang web xếp hạng cao hơn trên các công cụ tìm kiếm. Thẻ trong Next.js cho phép bạn chỉnh sửa các thông tin chung của trang web, điều này không thể thực hiện trong React. Thẻ là một phần cốt lõi trong metadata của trang web và giúp cải thiện xếp hạng SEO.

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

Ưu điểm chính của Next.js là hỗ trợ SSR tích hợp để tăng hiệu suất và SEO. Với tất cả thông tin được xử lý trên server, nó sẽ tạo ra thông tin HTML của trang. Sau đó, client có thể gửi một yêu cầu đến server và nhận toàn bộ trang HTML, thay vì yêu cầu từng thành phần riêng lẻ với client render.

Điểm mạnh của Next.js bao gồm:

Ứng dụng Next.js tải nhanh hơn đáng kể so với ứng dụng React thông thường, do được render phía Server.
Hỗ trợ tính năng cho trang web tĩnh.
Dễ dàng tiếp cận đối với những ai đã có kinh nghiệm làm việc với React.
Tự động chia nhỏ mã nguồn để tối ưu hóa hiệu suất khi tải trang.
Dễ dàng xây dựng các API bên trong sử dụng các API routes tích hợp sẵn và tạo các endpoint API.
Hỗ trợ tích hợp cho route cho page, CSS, JSX và TypeScript.
Linh hoạt thêm các plugin để tùy chỉnh Next.js theo nhu cầu của trang cụ thể.

Điểm yếu của Next.js là nó là một framework cố định và có giới hạn, được thiết kế để xây dựng các ứng dụng theo cách mà nó đề xuất. Tuy nhiên, các tùy chọn 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 để tạo trang chủ hoặc trang đích được tối ưu hóa, cũng như các trang khác dựa trên lưu lượng truy cập tìm kiếm tự nhiên. Các trang này sẽ hưởng lợi lớn từ các cải tiến SEO của Next.js.

Next.js cũng tốt hơn cho các trang web so với các ứng dụng web khác vì SSR cho phép nó có hiệu suất nhất quán trên mọi thiết bị.

Next.js không phù hợp để xây dựng các ứng dụng web phức tạp hoặc các ứng dụng yêu cầu bảo mật cao với xác thực, vì SSR không có lợi trong trường hợp này.

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

Trong phần này, mình sẽ giới thiệu cho bạn 5 thành phần cơ bản của Next.js. Trước khi đi vào chi tiết của từng khái niệm, chúng ta sẽ thiết lập môi trường và khởi tạo một ứng dụng Next.js.

Xem thêm : So deep nghĩa là gì? Trend mới gây bão trên mạng xã hội

Đầu tiên, bạn cần cài đặt NodeJS để có thể tạo và chạy một ứng dụng Next.js trên máy tính của bạn. 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.

Next.js hỗ trợ cả JavaScript và TypeScript, vì vậy bạn có thể khởi tạo dự án bằng 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 Next.js, bạn vào file package.json để xem các script sau để khởi chạy ứng dụng Next.js:

"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 sản phẩm.

Nếu bạn chạy ứng dụng này bằng cách sử dụng 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 một cấu trúc thư mục tối giản để tránh tình trạng thư mục dự án rối rắm. Cấu trúc thư mục bắt đầu chỉ có những thứ cần thiết nhất để chạy ứng dụng. Hiểu cấu trúc thư mục này sẽ giúp bạn làm việc một cách hiệu quả với dự án của mình.

Mỗi dự án Next.js bắt đầu với 3 thư mục: pages, public, và styles.

Dưới đây là một 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 pages chứa các tệp trang của ứng dụng. Mỗi tệp pages là một React Component với một route duy nhất được tạo tự động từ tên tệp. Ví dụ, trang hello.js được tìm thấy tại page/hello.js.

Một số trang như _app.js được đặt tiền tố gạch dưới trong tên tệp để đánh dấu chúng là các component tùy chỉnh. Các component này được Next.js sử dụng để làm việc với các component khác.

public:
Thư mục này dùng để lưu trữ các tệp tĩnh như hình ảnh hoặc biểu tượng được sử dụng trong trang web, cũng như các tệp nội bộ như Xác minh trang web của Google.

Ví dụ, thư mục public hiện có favicon.ico, một biểu tượng nhỏ được sử dụng trên các tab của trình duyệt, và vercel.svg, biểu tượng của công ty.

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 xác định kiểu chung mà tất cả các trang trong dự án sẽ sử dụng.

Xem thêm : Giáo trình make up chuyên nghiệp gồm những gì?

Bạn cũng có thể thêm kiểu dành riêng cho các component bằng cách sử dụng các tệp module có tên với hậu tố .module.css.

Định tuyến và điều hướng trong ứng dụng Next.js

Định tuyến cho phép người dùng điều hướng giữa các trang web trong Next.js. Có hai phương thức chính để xác định cách điều hướng:

Routes: xác định các route duy nhất và tương ứng với các component trong thư mục pages. Để tối ưu hóa điều hướng, hiểu được các khái niệm như index, nested routes, và dynamic routes là rất quan trọng.
Links: cho phép tạo liên kết giữa các route. Bạn có thể tạo liên kết bằng cách sử dụng thành phần Link của Next.js.

Trong ứng dụng Next.js, các trang có thể được xác định bằng tệp trong thư mục pages. Mỗi tệp pages được tạo ra như một React Component và có một route tương ứng.

Ví dụ: với các tệp index.js, about.js, và blog/[slug].js có thể được điều hướng như sau:

import Link from 'next/link';

function Home() {
  return (
    
      
        
          Trang chủ
        
      
      
        
          Về chúng tôi
        
      
      
        
          Bài viết Blog
        
      
    
  );
}

export default Home;

Link là một thành phần để tạo liên kết và cho phép người dùng điều hướng. Nó nhận các prop sau:

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

Ngoài ra, Next.js cũng hỗ trợ việc khai báo và điều hướng đến các Dynamic Routes thông qua Link. Ví dụ, các trang blog/[slug].js có thể được điều hướng như sau:

import Link from 'next/link';

function Posts({ posts }) {
  return (
    
      {posts.map((post) => (
        
          
            {post.title}
          
        
      ))}
    
  );
}

export default Posts;

Với định dạng route động như trên, chúng ta có thể tạo trang chi tiết của một bài viết cụ thể với URL: /blog/[slug].

Kết luận

Trong bài viết này, mình đã giới thiệu cơ bản về Next.js: một framework phát triển front-end React với các tính năng tối ưu hóa như SSR và tạo trang web tĩnh. Mình cũng đã đề cập đến ưu và nhược điểm của nó.

Trong phần tiếp theo, mình sẽ đi sâu vào các khái niệm và cách hoạt động của Next.js.

Nguồn: https://ispacedanang.edu.vn
Danh mục: Học tập