Site icon saotuvi.com

NextJS là gì? Kiến thức NextJS cơ bản bạn cần biết

Ms Gao
NextJS là gì

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ì?

Nguồn: austinshelby

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:

JS

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

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

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

export default ProductPage;
Product Page (product.js)

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:

JS

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

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

export default HomePage;
Home Page (index.js)

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

JS

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

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

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

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

export default HomePage;
Home Page (index.js)

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.

Nguồn: duomly

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

Ưu điểm của SSR:

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

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).

Nguồn: duomly

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

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

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:

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.

Nguồn: nextjs

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ụ:

CSS

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

JS

// 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.

JS

// 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:

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ó:

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

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:

Bash

npx create-next-app@latest

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

Bash

yarn create next-app my-nextjs-app

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

Bash

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:

Bash

cd my-nextjs-app

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

Bash

npm run dev

hoặc với yarn:

Bash

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.

pageslà 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

JS

// 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:

JSON

{ "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:

Bash

npm run build

hoặc nếu dùng yarn:

Bash

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

ReactJS NextJS
Là thư viện được xây dựng dựa trên JavaScript Là framework xây dựng dựa trên ReactJS
Được thiết kế để tập trung vào giao diện và tính tương tác của người dùng, ứng dụng React thường được tạo ra nhiều component để tái sử dụng và có dữ liệu thay đổi thường xuyên. Được thiết kế để tập trung vào việc cải thiện hiệu suất và tối ưu hoá SEO bằng cách hỗ trợ SSR với SSG
Không có hệ thống Routing mặc định. Phải sử dụng thêm library là react-router-dom. Hệ thống routing được tích hợp sẵn
Phù hợp cho ứng dụng đơn trang (SPA – Single Page Application) Phù hợp cho ứng dụng đa trang và trang tĩnh

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:

Exit mobile version