💊 tist
Back to blog
en
•
8 min read

Next.js 2024: Tối Ưu SEO, Hiệu Năng 'Khủng', Cộng Đồng 'Siêu To Khổng Lồ'

#nextjs #react #frontend #optimization #performance

Next.js 2024: Tối Ưu SEO, Hiệu Năng 'Khủng', Cộng Đồng 'Siêu To Khổng Lồ'

Next.js 2024: “Giữ Vững Phong Độ”, “Bứt Phá” Hơn Nữa!

“Hey ae!” 👋 Năm 2024, Next.js tiếp tục “giữ vững phong độ” là một trong những framework “hot” nhất cho lập trình viên front-end. Không “ngủ quên trên chiến thắng”, Next.js “tung ra” những cải tiến về SEO, hiệu năng và cộng đồng, hứa hẹn mang đến trải nghiệm “xịn xò” hơn bao giờ hết. Cùng “soi” xem có gì “hay ho” nhé!

SEO “Đỉnh Của Chóp”: “Thân Thiện” Hơn Với Google! 🤖

SEO luôn là “mối quan tâm hàng đầu” của các website, và Next.js 2024 không ngừng cải tiến khả năng SEO. Cùng tìm hiểu những thay đổi mới dưới đây:

Metadata API: Quản Lý Chúng Bạn Dễ Nhẹ Hơn

  • Metadata API: Dễ dàng quản lý các thẻ meta (title, description,…) và cấu trúc dữ liệu (structured data) cho từng trang. Tự do tùy chỉnh để “chiều lòng” các công cụ tìm kiếm.

Ví dụ:

// app/products/[id]/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
  title: "Product Details",
  description: "Learn more about this product",
};
export default function Page({ params }: { params: { id: string } }) {
  // ...
}

next/head: Hoạt Động Chuẩn Tiền Trong Server Components

  • next/head: Component này đã được cải tiến để hoạt động tốt hơn trong môi trường streaming và server components, giúp quản lý các thẻ meta một cách hiệu quả hơn.

Mã Ví Dụ:

// app/about/page.tsx
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "About Us",
  description: "This is our about page",
};

import Head from "next/head";

export default function AboutPage() {
  return (
    <>
      <Head>
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <h1>About Us</h1>
      <p>Công ty chú trọng sự tiện lợi và chất lượng.</p>
    </>
  );
}

Sitemaps và Robots.txt: Tự Động Tạo “Chuẩn Chắc”

  • Sitemap: Hỗ trợ tạo sitemap.xml giúp các công cụ tìm kiếm dễ dàng đón độ chỉ mục trang web của bạn.
  • Robots.txt: Tạo robots.txt để chỉ dẫn crawler của Google-bot truy cập và chỉ mục những trang mà bạn muốn.

Kích Hoạt Sitemap và Robots.txt:

npx next dev --experimental-srv

Cấu Hình Sitemap:

// next-sitemap.js
module.exports = {
  siteUrl: process.env.SITE_URL || "https://example.com",
  generateRobotsTxt: true,
};

Chạy scripts để tạo static sitemap:

npx next-sitemap

Hiệu Năng “Khủng”: Load Trang “Nhanh Như Chớp”! ⚡

Không chỉ dừng lại ở SEO, Next.js 2024 còn nâng cấp đáng kể về hiệu năng, giúp trang web của bạn tải nhanh hơn đáng kể.

Compiler “Xịn Xò”: Tối Ưu Hóa Bundle Size

  • Compiler: Sử dụng phiên bản mới nhất của compiler, giúp tối ưu hóa kích thước bundle và cải thiện tốc độ build. Giảm wait time, tăng trải nghiệm người dùng.

So Sánh:

  • Compiler cũ: 10s để build
  • Compiler mới: Chỉ 3s để build, giảm 70% thời gian chờ.

Hướng Dẫn Sử Dụng:

# Mặc định Next.js 2024 sử dụng_COMPILER mới nhất
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Partial Prerendering: Kết Hợp Static và Dynamic Content

  • Partial Prerendering: Tạo shell HTML tĩnh và “lấp đầy” các phần nội dung động bằng cách sử dụng streaming. Cải thiện đáng kể các chỉ số của Core Web Vitals như First Input Delay (FID) và Largest Contentful Paint (LCP).

Lợi Ích:

  • Nâng cao trải nghiệm người dùng: Tải trang nhanh hơn, giảm thời gian chờ đợi, giúp tăng độ hài lòng của khách hàng.
  • Tối ưu hóa hiệu suất: Giúp giảm khối lượng mã cần tải xuống, giúp cải thiện hiệu quả SEO và trải nghiệm người dùng.

Ví Dụ Thực Tế: Trong trang sản phẩm, bạn có thể sử dụng Partial Prerendering để tải cấu trúc trang trước và sau đó tải thông tin sản phẩm cụ thể liên quan đến người dùng.

// app/products/[id]/page.tsx
export default async function ProductPage({
  params,
}: {
  params: { id: string };
}) {
  const product = await getProductById(params.id);
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* ... */}
    </div>
  );
}

Streaming SSR: Truyền Dữ Liệu “Mượt Mái”

  • Streaming SSR: Tải nội dung đến người dùng “mượt mà”, giảm lượng tải và nâng cao trải nghiệm người dùng.

Tại sao nên sử dụng?

  • Tiết kiệm băng thông: Chỉ tải những phần cần thiết, giúp giảm quá trình chờ đợi.
  • Tăng tương tác: Người dùng có thể tương tác với trang ngay khi nhiều phần trang đã được tải.

Sử Dụng Streaming SSR: Next.js 2024 hỗ trợ tự động streaming SSR cho các trang, không cần cấu hình phức tạp.

Image Optimization: Tiếp Tục Tối Ưu Hóa

  • Cải tiến Image Optimization: Tiếp tục tối ưu hóa component next/image, hỗ trợ các định dạng mới như AVIF, cải thiện hiệu suất lazy loading.

Định dạng AVIF: AVIF (AV1 Image File Format) là định dạng hình ảnh được cải tiến từ Google, hỗ trợ nén giảm kích thước file và chất lượng hình ảnh cao hơn so với các định dạng khác.

Thiết lập sử dụng AVIF:

// next.config.js
module.exports = {
  images: {
    formats: ["image/avif", "image/webp"],
  },
};

Cộng Đồng “Siêu To Khổng Lồ”: “Học Hỏi” Không Giới Hạn! 🤝

Bên cạnh những cải tiến kỹ thuật, cộng đồng Next.js cũng ngày càng “lớn mạnh” và hỗ trợ người dùng.

Tài Liệu “Xịn Mịn”: Cập Nhật Liên Tục

  • Tài liệu: Cung cấp đầy đủ thông tin và hướng dẫn chi tiết, giúp bạn dễ dàng tìm kiếm thông tin mà không cần lo lắng.

Truy cập Tài Liệu:

# Truy cập trang tài liệu chính thức tại đây:
https://nextjs.org/docs

Hăng “Tá” Scenes và Examples: Học Hỏi Dễ Đàng

  • Hàng “tá” scenes và examples: Cung cấp nhiều ví dụ thực tế, giúp làm rõ và dễ dàng áp dụng vào dự án.

Truy cập Repository GitHub:

# Truy cập tại đây để xem ví dụ:
https://github.com/vercel/next.js/tree/canary/examples

Diễn Đàn và Cộng Đồng Sôi Nổi

  • Diễn đàn, cộng đồng sôi nổi: Bạn có thể đặt câu hỏi, thảo luận và nhận được sự hỗ trợ từ các chuyên gia trên toàn thế giới.

Tham Gia Diễn Đàn:

# Truy cập tại đây để tham gia:
https://nextjs.org/discuss

Khởi Tạo Dự Án Next.js 2024: “Vẫn Dễ”, “Vẫn Nhanh”!

Để tạo một dự án Next.js mới, bạn chỉ cần thực hiện 几步 đơn giản sau:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Giải Thích Các Buộc Lệnh:

  • create-next-app: Tạo dự án mới với cấu trúc cơ bản.
  • cd my-next-app: Di chuyển vào thư mục dự án.
  • npm run dev: Khởi chạy máy chủ phát triển.

Lựa Chọn App Router hoặc Pages Router: App Router được khuyến nghị sử dụng nhưng Pages Router vẫn được hỗ trợ.

”Tám” Chuyện Ngoài Lề: Next.js và Tương Lai

Dưới đây là một số dự đoán về các cải tiến tương lai của Next.js.

AI “Len Lỏi” vào Next.js

  • Lập trình tự động: Sử dụng AI để hỗ trợ tạo code, tối ưu hóa SEO và cá nhân hóa nội dung.
  • Chatbot hỗ trợ: Đặt câu hỏi vào Chatbot của Next.js để nhận phản hồi nhanh chóng.

Server Components “Lên Nổi”

  • Hiệu suất cao: Server Components giúp xử lý các tác vụ phức tạp ở phía server, giảm tải công việc cho client.
  • Toán tử đồng bộ server-side: Nhờ sử dụng server-side, việc xử lý dữ liệu trở nên dễ dàng và hiệu quả hơn.

Edge Functions “Lên Dần”

  • Tốc độ: Chạy mã gần với người dùng: Giảm thời gian chờ đợi bằng cách thức chạy mã hơn gần với vị trí địa lý của người dùng.
  • Hỗ trợ serverless: Tích hợp với các nền tảng serverless như Vercel, AWS Lambda.

Kết Luận: Next.js - “Lựa Chọn Sáng Suốt” Cho Tương Lai!

Next.js 2024 tiếp tục khẳng định vị thế là “hiền đệ” trong làng framework front-end. Với những cải tiến về SEO, hiệu năng, cộng đồng, và sự “bắt nhịp” với các xu hướng công nghệ mới, Next.js là lựa chọn sáng suốt cho các lập trình viên front-end trong năm 2024 và những năm tiếp theo. “Lên thuyền” Next.js ngay và “hòa mình” vào “cơn sóng thần” này nhé các “chiến hữu”!

Tài Liệu Tham Khảo:

Dưới đây là một số tài liệu tham khảo có thể giúp bạn nắm bắt kỹ lưỡng hơn các tính năng mới từ Next.js 2024:

Chúc các bạn cùng Next.js có một hành trình thú vị và thành công trong năm 2024! 🚀