NextJS không chỉ đơn giản là một framework React, nó là một môi trường phát triển mạnh mẽ, mang lại hiệu suất tuyệt vời và cho trải nghiệm người dùng vượt trội. Bằng cách tận dụng các tính năng quan tích hợp sẵn, NextJS cho phép chúng ta xây dựng các ứng dụng React một cách nhanh chóng và hiệu quả.mTrong bài viết này, các bạn hãy cùng mình tìm hiểu sâu về NextJS nhé.

1. NextJS là gì?

NextJS là một framework có mã nguồn mở được xây dựng trên nền tảng của React, cho phép chúng ta xây dựng các trang web tĩnh có tốc độ siêu nhanh và thân thiện với người dùng, cũng như xây dựng các ứng dụng web React.

NextJS được ra đời vào năm 2016, thuộc sở hữu của Vercel. NextJS bắt đầu trở nên phổ biến vào năm 2018 và tiếp tục tăng trưởng mạnh mẽ trong cộng đồng phát triển web. Sự kết hợp của các tính năng như Server-side Rendering (SSR) với Static Site Generation (SSG) đã giúp NextJS trở thành sự lựa chọn hấp dẫn cho nhiều dự án.

2. Các tính năng chính của NextJS

2.1  Routing trong NextJS

2.1.1. Automatic Routing

NextJS sẽ tự động tạo các router dựa trên cấu trúc thư mục của chúng ta. Ví dụ, nếu bạn tạo một file có tên là about.js ở thư mục pages. NextJS sẽ tạo router là /about.

2.1.2. Nested Routing

Chúng ta có thể tạo các thư mục con để tạo các router lồng nhau. Ví dụ, nếu bạn tạo một folder có tên blog nằm trong folder pages, bên trong folder blog lại có file post.js, đường dẫn sẽ là pages/blog/post.js, thì router mà NextJS tạo ra sẽ là /blog/post.

2.1.3. Dynamic Routes

Bạn có thể tạo các router động bằng cách sử dụng cặp dấu [] trong tên file. Ví dụ nếu đường dẫn là pages/blog/[slug].js thì NextJS sẽ tạo ra các router như /blog/blog-dau-tien hoặc /blog/blog-thu-hai. Với slug là một giá trị bất kì do bạn truyền vào.

2.1.4. Link Component

Để tạo liên kết giữa các trang, bạn sử dụng component Link được cung cấp sẵn bởi NextJS ở thư viện next/link. Sử dụng Link  thay cho thẻ a giúp tránh việc tải lại trang và tối ưu hóa hiệu suất.

2.1.5. Query Parameters

Bạn có thể truyền dữ liệu giữa các trang sử dụng query parameters trong router bằng cách sử dụng ký tự dấu chấm hỏi ? trong tên file. Ví dụ, pages/product.js có thể có các router như /product?productId=0001.

Một ví dụ trực quan hơn là giả sử bạn có một file product.js có nội dung như sau:

// pages/product.js
import { useRouter } from 'next/router'; 

function ProductPage() {
  const router = useRouter();
  const { productId } = router.query;

  return (
    <div>
      <h1>Product Details</h1>
      <p>Product ID: {productId}</p>
    </div>
  );
}

export default ProductPage;

Khi người dùng truy cập vào địa chỉ /product?productId=123, NextJS sẽ định tuyến bạn đến trang /product, và ở trang này bạn sẽ nhận được giá trị cuả productId mà bạn truyền vào.  

Các bạn có thể tạo một file để chuyển hướng sang trang /product như sau:

// pages/index.js
import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>Welcome to the Store</h1>
      <Link href="/product?productId=123">View Product 123</Link>
      <Link href="/product?productId=456">View Product 456</Link>
    </div>
  );
}

export default HomePage;

Hoặc sử dụng hook có tên là useRouter được cung cấp sẵn bởi next/router:

// pages/index.js
import { useRouter } from 'next/router';

function HomePage() {
  const router = useRouter();

  const goToProduct = (productId) => {
    router.push({
      pathname: '/product',
      query: { productId },
    });
  };

  return (
    <div>
      <h1>Welcome to the Store</h1>
      <button onClick={() => goToProduct(123)}>View Product 123</button>
      <button onClick={() => goToProduct(456)}>View Product 456</button>
    </div>
  );
}

export default HomePage;

2.2 Rendering trong NextJS

2.2.1. Server-side Rendering (SSR)

2.2.1.1. SSR là gì?

Từ những năm 2000, SSR đã được sử dụng rất phổ biến, gọi nó là SSR vì hầu hết các logic phức tạp trên trang web sẽ được xử lý ở phía server.

Cơ chế của SSR như sau:

• Khi user truy cập vào một trang web, trình duyệt sẽ gửi request tới server
• Server sẽ nhận request, truy cập vào dữ liệu trong database, render ra HTML
• Trả HTML kèm với CSS, JS về cho browser
• Browser nhận được HTML thì tiến hành tải xuống và render ra UI nhưng lúc này chưa có JS
• Browser tải xuống JS và thực thi các câu lệnh JS
• Website load xong và có thể tương tác bình thường

Ưu điểm của SSR:

• Load lần đầu nhanh vì toàn bộ dữ liệu đã được xử lý ở phía server, client chỉ cần nhận về và hiển thị ra cho user
• Tốt cho SEO vì dữ liệu được render dưới dạng HTML (bạn ấn chuột phải chọn View Page Source một trang web bất kì là sẽ thấy điều này), giúp cho bot của Google khi quét sẽ thấy được toàn bộ dữ liệu
• Lập trình viên chỉ cần code trên 1 project là đã có thể tạo ra trang web hoàn chỉnh có cả Frontend lẫn Backend, không cần tách ra làm 2 project.

Nhược điểm của SSR:

• Server sẽ phải xử lý nhiều dữ liệu dẫn đến quá tải
• Khi user chuyển trang thì cả trang sẽ phải load lại để lấy dữ liệu từ server, dẫn đến trải nghiệm không tốt

Hiện tại vẫn còn rất nhiều website đang sử dụng SSR như các website được xây dựng bằng Wordpress, các trang bán hàng lâu đời như thegioididong,...

Vì những nhược điểm nêu trên mà đến năm 2010, sự phát triển của JavaScript đã tiến thêm một bước nữa khi Client-side Rendering ra đời, nhằm khắc phục những nhược điểm của SSR.

2.2.1.2. Client-side Rendering (CSR)

Sở dĩ nó được gọi là CSR vì việc render HTML sẽ được thực thi ở phía client. Hay chúng ta còn gọi là Single Page App (SPA).

Các ưu điểm của CSR:

• Chuyển việc xử lý dữ liệu sang cho client giúp server nhẹ việc hơn
• Trang chỉ cần load một lần duy nhất, khi user muốn lấy dữ liệu mới từ server chỉ cần gọi đến server thông qua AJAX
• Trang web không cần load lại nhiều khi user chuyển trang, đem đến trải nghiệm tốt hơn cho người dùng

Tuy nhiên, CSR vẫn còn một số nhược điểm như dưới đây:

• Load trang lần đầu sẽ chậm hơn SSR nếu không tối ưu. Do browser phải tải toàn bộ HTML và JS ở lần đầu load trang, chạy JS và gọi API để lấy dữ liệu từ server rồi mới render lên UI cho user.
• Lập trình viên phải chia ra làm 2 project: Backend để viết API và Frontend để hiển thị
• Website không thể chạy nếu tắt JavaScript ở trình duyệt
• Nếu user sử dụng thiết bị có cấu hình yếu thì sẽ bị load chậm
• SEO không tốt bằng SSR do dữ liệu được render bởi JS là dữ liệu động

Bạn sẽ thấy CSR thường được sử dụng trong các ứng dụng web cần sự tương tác nhiều, các ứng dụng này chủ yếu được xây dựng bằng ReactJS hay VueJS, AngularJS.

Chính vì những nhược điểm của CSR mà NextJS ra đời. NextJS là sự kết hợp cả SSR lẫn CSR để tạo nên website có trải nghiệm tuyệt vời nhất.

2.2.1.3. SSR trong NextJS

Cách SSR hoạt động bên trong NextJS:

• Khi user truy cập vào một trang sử dụng SSR của NextJS, browser sẽ gửi một request đến server
• Trước khi gửi kết quả ra trình duyệt, NextJS chạy hàm getServerSideProps() để lấy dữ liệu cần thiết cho trang. Hàm này thường sẽ dùng để gọi API hoặc truy vấn vào cơ sở dữ liệu để lấy dữ liệu cần thiết.
• Với dữ liệu cần thiết đã được lấy từ bước trước, NextJS tạo ra một phiên bản đã render đầy đủ cả nội dung và dữ liệu. Sau đó trả phiên bản này ra browser dưới dạng HTML
• Browser nhận được code HTML từ server và hiển thị lên giao diện. Nội dung của trang sẽ được hiển thị ngay lập tức, sau đó JS được tải xuống và đổ lên để trang có thể tương tác được, ví dụ như hàm onClick().  

2.2.2. Static Site Generation (SSG)

SSG là một phương pháp mà NextJS cung cấp sẵn cho chúng ta, cho phép bạn tạo các trang tĩnh và lưu chúng xuống dưới dạng file html tĩnh. Điều này giúp cải thiện hiệu suất tải trang và cung cấp trải nghiệm người dùng tốt hơn vì nội dung được lấy từ file html và hiển thị ngay lập tức mà không cần đợi việc tải về từ phía server.

Khi bạn chạy lệnh next build, NextJS sẽ chạy hàm getStaticProps để lấy dữ liệu cần thiết. Với dữ liệu lấy được, NextJS sẽ tạo ra các phiên bản đã được render, lưu chúng trong thư mục .next, và hiển thị lên khi user truy cập.

2.3 Styling trong NextJS

2.3.1. CSS Modules

Để style cho ứng dụng NextJS, cách dễ nhất là bạn có thể tạo các file CSS/SCSS riêng lẻ cho từng component hoặc sử dụng file chung cho toàn dự án.

Ví dụ:

// styles.module.css
.myButton {
  background-color: blue;
  color: white;
}

// MyComponent.js
import styles from './styles.module.css';

function MyComponent() {
  return <button className={styles.myButton}>Click me</button>;
}

2.3.2. CSS-in-JS Libraries

Ngoài ra bạn cũng có thể sử dụng các thư viện CSS-in-JS như Styled-Components để viết trực tiếp css vào code.

// MyComponent.js
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
`;

function MyComponent() {
  return <StyledButton>Click me</StyledButton>;
}

2.3.3. CSS Frameworks

NextJS cũng hỗ trợ sử dụng cùng các CSS framework như TailwindCSS, Bootstrap hoặc MaterialUI.

Trên 200lab cũng đã có bài viết hướng dẫn cách cài đặt và sử dụng TailwindCSS với Bootstrap, các bạn có thể tham khảo qua nhé.

HƯỚNG DẪN CÀI ĐẶT VÀ SỬ DỤNG TAILWIND CSS CƠ BẢN

Tailwind CSS về cơ bản là framework CSS giúp xây dựng trang web một cách hiện đại mà không cần rời khỏi file HTML.

200Lab BlogPum

3. Tại sao nên sử dụng NextJS? Ưu điểm của NextJS

NextJS hiện tại đang được sử dụng ở rất nhiều dự án khác nhau, sở dĩ NextJS được tin dùng như vậy là vì một số lý do sau:

• Sử dụng SSR và SSG: Giúp cải thiện tốc độ tải trang và khả năng SEO.
• Có nhiều tính năng giúp tối ưu hoá hiệu suất như Code Splitting, Lazy Loading, Image Optimization,...
• Fast Refresh: Tính năng giúp tự động làm mới giao diện mà không cần load lại toàn bộ trang.
• Tự động tạo file CSS dành riêng cho mỗi trang, giúp tránh xung đột trong việc sử dụng và quản lý các file CSS.
• Hỗ trợ TypeScript: NextJS cũng hỗ trợ sử dụng Typescript giúp cải thiện tính rõ ràng cho code và thuận tiện cho việc debug về sau.
• Cộng đồng lớn: NextJS có một cộng đồng sử dụng đông đảo, điều này được chứng minh ở trên chính trang Github của NextJS khi nó đang đạt khoảng hơn 100k sao. Điều này giúp cho NextJS có thêm nhiều nguồn tài liệu phong phú và các plugin hữu ích.
• Hệ sinh thái mạnh mẽ: NextJS kết hợp tốt với các thư viện và công cụ như Redux, React Query, Apollo Client và nhiều thư viện khác nằm trong hệ sinh thái của React.
• Tích hợp tốt với React: Nếu bạn đã quen với việc sử dụng React trước đó thì việc làm quen với NextJS sẽ đơn giản hơn rất nhiều.

4. Nhược điểm của NextJS

Mặc dù có nhiều ưu điểm nêu trên, NextJS vẫn có những khuyết điểm nên chúng ta cần xem xét trước khi sử dụng nó:

• Khó học cho người mới: Nếu bạn chưa có hiểu biết cơ bản về Web Fundamentals, JavaScript và React thì việc học NextJS sẽ hơi khó khăn. Nhất là khi bạn gặp các khái niệm như SSR hay SSG.
• Khó khăn trong việc tích hợp với một số thư viện bên ngoài: Một số thư viện và plugin có thể cần phải điều chỉnh hoặc tùy chỉnh để hoạt động tốt với Next.js. Ví dụ như để sử dụng Redux trong ứng dụng NextJS, các bạn cần cài thêm thư viện next-redux-wrapper để quản lý state trên cả server và client.

Redux là gì? Tìm hiểu Redux cơ bản cho người mới bắt đầu

Redux là gì? Vì sao người ta thường dùng Redux cùng React? Cùng 200Lab cập nhật kiến thức Redux cơ bản & ứng dụng hữu ích nhé!

200Lab BlogLam Vu Hoang

• Phụ thuộc vào hệ sinh thái của React: Next.js phụ thuộc vào React, vì vậy nếu bạn không quen thuộc với React hoặc không muốn sử dụng React thì NextJS không phải là lựa chọn tốt.
• Đòi hỏi chạy trên server NodeJS: Để deploy ứng dụng NextJS, bạn cần có một máy chủ NodeJS, việc này có thể làm tăng chi phí và quá trình triển khai sẽ trở nên phức tạp hơn.
• Cấu trúc dự án phức tạp: Với các dự án lớn, việc quản lý cấu trúc dự án không cẩn thận lúc ban đầu sẽ dẫn đến việc khó quản lý sau này.

Tuỳ vào tính chất của dự án và yêu cầu mà các bạn có thể cân nhắc có nên sử dụng NextJS trong dự án của mình hay không. Một số dự án thường được sử dụng NextJS để triển khai như: Trang tin tức, Blog, Landing Page,...

Nhìn chung thì website nào cần khả năng SEO tốt nhưng vẫn đem lại trải nghiệm mượt mà cho người dùng thì sẽ được cân nhắc sử dụng NextJS.

5. Hướng dẫn sử dụng NextJS cơ bản

Bước 1: Chuẩn bị môi trường

Trước tiên, bạn cần cài đặt NodeJS và npm (hoặc yarn) vào máy của mình. Các bạn có thể cài NodeJS ở trang chủ của NodeJS hoặc cài thông qua thư viện nvm.

Về IDE thì các bạn có thể dùng Visual Studio Code để code.

Bước 2: Tạo một project NextJS mới

Để tạo một project NextJS mới, các bạn chạy câu lệnh sau:

npx create-next-app@latest

hoặc nếu bạn sử dụng yarn:

yarn create next-app my-nextjs-app

Sau đó chọn theo hướng dẫn:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes
What import alias would you like configured? @/*

Bước 3: Chạy project trong NextJS

Tiếp đến bạn di chuyển vào thư mục của project vừa tạo:

cd my-nextjs-app

Chạy lệnh sau để chạy project:

npm run dev

hoặc với yarn:

yarn dev

Sau khi chạy thành công, bạn sẽ thấy xuất hiện đường link ở local, thường sẽ là http://localhost:3000. Các bạn truy cập link này để thấy app của mình chạy trên browser.

Bước 4: Tạo các trang cho dự án NextJS

NextJS đã tạo sẵn cho chúng ta folder pages để tạo các trang cho dự án.

pages là nơi để bạn tạo router của ứng dụng mà mình đã nhắc đến ở phần 2 của bài này. Bên trong pages có 3 file quan trọng đó là: _app.js, _document.js, index.js

• _app.js: Là điểm khởi đầu của toàn ứng dụng. Ở file này bạn có thể đưa các thành phần layout như Header, Footer để chúng bọc tất cả các trang trên app. Hoặc Redux Store cũng có thể bọc ở đây.
• _document.js: _document.js không phải là một trang riêng lẻ, nó là một tệp dùng để cấu hình các thẻ html, head, và các thẻ khác trong file html. Bạn có thể sửa đổi hoặc thêm các thẻ như <meta>, <link>, hay các đoạn CSS, JS liên quan đến toàn bộ trang web.
• index.js: Đây chính là trang homepage của bạn, khi chúng ta truy cập vào địa chỉ trang chủ http://localhost:3000, NextJS sẽ tự động hiển thị nội dung từ file index.js
• Folder api: Được sử dụng để tạo các API Routes trong NextJS, đây là tính năng vô cùng mạnh mẽ của NextJS cho phép bạn tạo các API Endpoint ở ngay trong ứng dụng NextJS của bạn. Ví dụ khi bạn tạo một file my-api.js bên trong pages/api, bạn có thể gọi đến endpoint này bằng cách sử dụng địa chỉ http://localhost:3000/api/my-api. Giả sử file my-api.js của bạn có nội dung như sau:

// pages/api/my-api.js
export default function handler(req, res) {
  const data = { message: 'This is an API response' };
  res.status(200).json(data);
}

Khi truy cập vào http://localhost:3000/api/my-api, bạn sẽ nhận được response như sau:

{ "message": "This is an API response" }

Bước 5: Deploy ứng dụng NextJS

Có rất nhiều cách để deploy ứng dụng NextJS: Cách phổ biến nhất cho những ứng dụng NextJS đơn giản là sử dụng Vercel. Bạn chỉ cần kết nối Vercel với tài khoản Github hay Bitbucket của bạn, Vercel sẽ tự động lo giúp bạn phần việc còn lại.

Để deploy ứng dụng NextJS lên Vercel, việc đầu tiên chúng ta cần làm là build ứng dụng.

Các bạn chạy lệnh sau để tiến hành build:

npm run build

hoặc nếu dùng yarn:

yarn build

Khi đã build xong chúng ta đẩy ứng dụng NextJS lên các nền tảng như Github, Gitlab hoặc Bitbucket.

Sau khi đẩy thành công, chúng ta đăng nhập vào Vercel và chọn phương thức đăng nhập.

Sau khi đăng nhập thành công, bạn chọn Add New -> Project.

Tìm đến Project bạn vừa đẩy lên và chọn Import.

Ở mục Framework Preset các bạn chọn NextJS, các bạn có thể thay đổi các tùy chọn build ở mục Build and Output Settings rồi ấn Deploy.

Chờ một lúc để Vercel tiến hành deploy. Nếu thành công Vercel sẽ chuyển bạn sang trang sau, các bạn chọn Continue to Dashboard:

Ở đây các bạn ấn Visit để xem trang web của mình sau khi được deploy.

Ngoài Vercel thì còn có nhiều nền tảng khác giúp bạn deploy ứng dụng NextJS như: Netlify, AWS Amplify, Heroku, DigitalOcean,...

Hoặc nếu bạn sở hữu một webserver riêng như Apache hoặc Nginx thì cũng có thể deploy lên server của mình.

6. So sánh NextJS và ReactJS

Hãy đọc thêm bài viết chi tiết về ReactJS của 200Lab nhé:

ReactJS là gì? Những điều bạn cần biết về ReactJS

ReactJS là gì? Vì sao ReactJS cần thiết đối với các nhà lập trình web? Cùng tìm hiểu về các ứng dụng và khái niệm cần nắm rõ về ReactJS nhé!

200Lab BlogTỪ QUỐC HƯNG

7. Kết luận về NextJS

Qua bài viết này đã giúp các bạn hình dung được phần nào về NextJS. NextJS là một React framework phù hợp với nhiều kiểu dự án khác nhau, tuy nhiên cần phải dựa vào tính chất của dự án để quyết định xem có nên sử dụng NextJS hay không.

Chúng ta đã có cái nhìn tổng quan về sức mạnh và tính linh hoạt của NextJS trong việc phát triển ứng dụng web. NextJS không chỉ đơn giản là một công cụ, mà là một trợ thủ đắc lực mang đến sự thuận lợi và tăng cường hiệu suất cho các dự án.

Với khả năng tối ưu hóa và tích hợp linh hoạt, NextJS giúp tối đa hóa trải nghiệm người dùng và giảm thời gian phát triển. Đồng thời, nó cũng cung cấp sự hỗ trợ đáng kể, tạo nền tảng vững chắc để khám phá và tiến xa hơn trong thế giới phức tạp của phát triển web.

Hãy bắt tay vào xây dựng những ứng dụng đầy thú vị và đột phá với NextJS nhé! Cảm ơn bạn đã đọc hết bài viết này. Đừng quên thường xuyên theo dõi các bài viết hay về Lập Trình & Dữ Liệu trên 200Lab Blog nhé. Cũng đừng bỏ qua những khoá học Lập Trình tuyệt vời trên 200Lab nè.

Một vài bài viết bạn sẽ thích:

• Git là gì? Tổng quan về Git cơ bản cho lập trình viên
• So sánh Git Rebase & Git Merge: Những điều bạn cần biết
• Bitbucket là gì? GitHub là gì? So sánh Bitbucket và GitHub
• Cách giải quyết lỗi password authentication Github