Nâng cấp portfolio với Next.js, TypeScript và TailwindCSS

Giới thiệu

Trong vài tuần qua, tôi đã làm việc để nâng cấp portfolio của mình. Trước đây, nó chỉ được xây dựng bằng HTML, CSS và JavaScript. Tuy nhiên, tôi quyết định tiến xa hơn: migrando para Next.js, com TypeScript e TailwindCSS.
Sự phát triển này không chỉ là một sự hiện đại hóa công nghệ mà còn là một quá trình học hỏi liên tục nhằm nâng cao hiệu suất, tổ chức và khả năng mở rộng trong các dự án mà tôi phát triển.

Tại sao chọn Next.js?

Hiệu suất và Tối ưu hóa SEO

Next.js là một framework React cho phép bạn xây dựng các ứng dụng web nhanh chóng và hiệu quả. Một số lợi ích nổi bật của Next.js bao gồm:

• Rendering phía máy chủ (SSR): Tăng tốc độ tải trang và cải thiện SEO.
• Tối ưu hóa tự động: Next.js tự động phân chia mã và tối ưu hóa các tài nguyên.

Hỗ trợ TypeScript

Việc sử dụng TypeScript giúp tăng cường độ tin cậy của mã nguồn với loại tĩnh, giảm thiểu lỗi trong quá trình phát triển. TypeScript cung cấp:

• Kiểm tra lỗi sớm: Phát hiện lỗi trong quá trình biên dịch thay vì khi chạy ứng dụng.
• Tài liệu mã nguồn tốt hơn: Giúp các lập trình viên khác hiểu rõ hơn về mã.

Giao diện đẹp với TailwindCSS

TailwindCSS là một framework CSS tiện lợi cho phép bạn xây dựng giao diện đẹp mắt mà không cần phải viết nhiều CSS:

• Tiện lợi và nhanh chóng: Sử dụng các lớp CSS đã được định nghĩa sẵn để thiết kế giao diện.
• Tùy biến dễ dàng: Tùy chỉnh giao diện theo nhu cầu mà không cần phải viết lại mã.

Các bước thực hiện nâng cấp portfolio

Bước 1: Cài đặt môi trường

Đầu tiên, bạn cần cài đặt Node.js và npm (Node Package Manager). Sau đó, bạn có thể tạo một ứng dụng Next.js mới bằng lệnh sau:

npx create-next-app@latest my-portfolio
cd my-portfolio

Bước 2: Cài đặt TypeScript và TailwindCSS

Tiến hành cài đặt TypeScript và TailwindCSS bằng cách chạy các lệnh sau:

npm install --save typescript @types/react @types/node
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

Bước 3: Cấu hình TailwindCSS

Mở file tailwind.config.js và thêm đường dẫn đến các tệp mà bạn muốn TailwindCSS áp dụng:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Sau đó, cập nhật file globals.css để bao gồm các lớp CSS của Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Bước 4: Xây dựng giao diện

Bắt đầu xây dựng các thành phần giao diện cho portfolio của bạn bằng cách tạo các file trong thư mục components. Ví dụ, bạn có thể tạo một file Header.tsx:

const Header = () => {
  return (
    <header className="bg-blue-500 text-white p-4">
      <h1 className="text-2xl">Portfolio của tôi</h1>
    </header>
  );
};

export default Header;

Bước 5: Tạo trang chính

Trong thư mục pages, tạo file index.tsx và sử dụng các thành phần đã tạo:

import Header from '../components/Header';

const Home = () => {
  return (
    <div>
      <Header />
      <main className="p-4">
        <h2 className="text-xl">Chào mừng đến với portfolio của tôi!</h2>
      </main>
    </div>
  );
};

export default Home;

Thực hành tốt

Tối ưu hóa hiệu suất

• Sử dụng kỹ thuật phân trang cho danh sách sản phẩm hoặc dự án để không tải quá nhiều thông tin một lần.
• Nén hình ảnh để giảm kích thước tải về.

Các lỗi phổ biến

• Không cài đặt đúng TypeScript có thể dẫn đến lỗi biên dịch. Hãy chắc chắn kiểm tra file cấu hình.
• Nếu không cấu hình Tailwind đúng cách, lớp CSS có thể không hoạt động.

Mẹo hiệu suất

• Sử dụng getStaticProps và getStaticPaths cho các trang tĩnh để cải thiện tốc độ tải trang.
• Tham khảo các thư viện tối ưu hóa hình ảnh như next/image.

Giải quyết sự cố

Nếu bạn gặp phải lỗi khi chạy ứng dụng, hãy kiểm tra các thông báo lỗi trong terminal và đảm bảo rằng bạn đã cài đặt tất cả các gói cần thiết.

Kết luận

Việc nâng cấp portfolio của tôi với Next.js, TypeScript và TailwindCSS không chỉ mang lại trải nghiệm tốt hơn cho người dùng mà còn giúp tôi học hỏi và phát triển kỹ năng lập trình của mình. Hãy thử nghiệm với các công nghệ này và bạn sẽ thấy sự khác biệt!
👉 Hãy chia sẻ kết quả của bạn và tham gia vào cộng đồng lập trình viên!

Câu hỏi thường gặp (FAQ)

1. Tại sao nên sử dụng Next.js?
Next.js cung cấp hiệu suất tốt và tối ưu hóa SEO với khả năng rendering phía máy chủ.

2. Có thể sử dụng TailwindCSS với các framework khác không?
Có, TailwindCSS có thể được sử dụng với nhiều framework khác nhau, không chỉ riêng Next.js.

Tài nguyên và liên kết tham khảo

• Next.js Documentation
• TypeScript Documentation
• TailwindCSS Documentation