NextJs: NextJs là gì?

NextJs: NextJs là gì? - Part 1

NextJs là gì?

Next.js là một framework dựa trên React cho phép bạn tối ưu hoá hiệu năng, hỗ trợ SEO và trải nghiệm người dùng thông qua pre-rendering: Server Side Rendering (SSR) và Static Site Generation (SSG).

Trong bài viết này, mình sẽ chia sẽ cách cài đặt và sử dụng Bootstrap 5 với NextJs

Cài đặt

Mở terminal và chạy lệnh sau để tạo dự án Next.js mới. Thay thế my-next-app bằng tên dự án bạn muốn.

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

Bạn chọn Typescript, ESLint, src/, App Router

√ 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
Creating a new Next.js app in D:\Practices\NextJs\nextjs-bootstrap-example.

Using npm.

Initializing project with template: app


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next

Mở trình duyệt web và truy cập http://localhost:3000 để xem ứng dụng của bạn.

Cài đặt Bootstrap 5

Bạn cần thực hiện 2 bước

Dọn dẹp css trong project mẫu
Thêm bootstrap vào dự án

Xóa bỏ tất cả css trong các file: globals.css và page.module.css. Thay thế nội dung file page.tsx bằng đoạn code sau:

export default function Home() {
  return (
    <main>
      <h1 className="text-danger">Hello Bootstrap</h1>
    </main>
  )
}

Bởi vì chưa có Bootstrap nên dòng chữ Hello Bootstrap sẽ hiển thị màu đen

Thêm bootstrap vào NextJs

Cài đặt package:

npm install bootstrap

Mở file layout.tsx, khai báo thêm bootstrap.css

import 'bootstrap/dist/css/bootstrap.css';

File layout.tsx sẽ có nội dung như sau:

import 'bootstrap/dist/css/bootstrap.css';
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
        <BootstrapClient />
      </body>
    </html>
  );
}

Cài đặt Bootstrap Javascript

Bootstrap JavaScript cung cấp cho bạn khả năng tương tác cho website được xây dựng bằng framework Bootstrap. Nó bao gồm các thành phần JavaScript được viết bằng Vanilla JavaScript, giúp bạn dễ dàng thêm các yếu tố động và tương tác vào trang web của mình

Dưới đây là ví dụ hướng dẫn bạn tích hợp Bootstrap Javascript vào NextJs

Mở file page.tsx, cập nhật nội dung như sau:

export default function Home() {
  return (
    <main>
      <div className="text-center mt-4 col-md-6 mx-auto"> 
        <h1 className="text-danger">Hello Bootstrap</h1>
        
        <div className="accordion" id="accordionExample">
          <div className="accordion-item">
            <h2 className="accordion-header" id="headingOne">
              <button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
              </button>
            </h2>
            <div id="collapseOne" className="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
              <div className="accordion-body">
                <strong>This is the first accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. Also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
              </div>
            </div>
          </div>
          <div className="accordion-item">
            <h2 className="accordion-header" id="headingTwo">
              <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2
              </button>
            </h2>
            <div id="collapseTwo" className="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
              <div className="accordion-body">
                <strong>This is the second accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. Also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
              </div>
            </div>
          </div>
          <div className="accordion-item">
            <h2 className="accordion-header" id="headingThree">
              <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Accordion Item #3
              </button>
            </h2>
            <div id="collapseThree" className="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
              <div className="accordion-body">
                <strong>This is the third accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. Also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}

Bạn sẽ thấy một accordion hiển thị trong trình duyệt. Tuy nhiên, nếu bạn click vào bất kỳ mục nào, bạn sẽ nhận thấy accordion chưa thực sự collapse

Chúng ta có thể xử lý vấn đề này bằng cách cập nhật file layout.js để import file JavaScript của Bootstrap. Tuy nhiên, chúng ta chỉ muốn tải Bootstrap JavaScript ở phía client (client-side), ta sẽ tạo một component mới và sử dụng use client. Cách này giúp đảm bảo Bootstrap JavaScript chỉ được tải cho client mà không tải trên server.

Tạo file src/components/BootstrapClient.tsx

"use client"

import { useEffect } from 'react';

function BootstrapClient() {
  useEffect(() => {
    require('bootstrap/dist/js/bootstrap.bundle.min.js');
  }, []);

  return null;
}

export default BootstrapClient;

Khai báo BootstrapClient trong file layout.tsx

import BootstrapClient from '@/components/BootstrapClient.js';
//...
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
        <BootstrapClient />
      </body>
    </html>
  );
}

Kiểm tra lại accordion để xem nó hoạt động chưa.

Tham khảo

Install Bootstrap In Next.js 13 Using The App Router

Ghi chú

Từ Bootstrap 5, jQuery đã bị loại bỏ hoàn toàn

VanillaJS là một cái tên để chỉ việc sử dụng Javascript thông thường mà không dùng bất cứ thư viện phụ trợ nào như jQuery. Mọi người dùng tên này như một lời đùa cợt để nhắc các lập trình viên khác rằng ngày nay nhiều thứ có thể làm được mà không cần đến các thư viện Javascript phụ trợ

ASP.NET MVC: Cơ bản về Validation

Validation (chứng thực) là một tính năng quan trọng trong ASP.NET MVC và được phát triển trong một thời gian dài. Validation vắng mặt trong phiên bản đầu tiên của asp.net mvc và thật khó để tích hợp 1 framework validation của một bên thứ 3 vì không có khả năng mở rộng. ASP.NET MVC2 đã hỗ trợ framework validation do Microsoft phát triển, tên là Data Annotations. Và trong phiên bản 3, framework validation đã hỗ trợ tốt hơn việc xác thực phía máy khách, và đây là một xu hướng của việc phát triển ứng dụng web ngày nay.

Nhật ký học tập

Tìm kiếm Blog này