Boilerplate cho Next.js và Tailwind CSS: Hướng dẫn toàn diện

Boilerplate và Starter cho Next JS 13+, Tailwind CSS 3.3 và TypeScript

🚀 Boilerplate và Starter cho Next.js, Tailwind CSS và TypeScript ⚡️ Được tạo với trải nghiệm phát triển ưu tiên: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, Netlify, PostCSS, Tailwind CSS.

Sao chép dự án này và sử dụng nó để tạo dự án Next.js riêng của bạn. Bạn có thể kiểm tra Next js templates demo.

Tính năng

Trải nghiệm phát triển ưu tiên:

• ⚡ Next.js cho Trình tạo Trang Tĩnh
• 🔥 Kiểm tra kiểu TypeScript
• 💎 Tích hợp với Tailwind CSS
• ✅ Chế độ nghiêm ngặt cho TypeScript và React 18
• 📏 Công cụ Linter với ESLint (cấu hình mặc định NextJS, NextJS Core Web Vitals, Tailwind CSS và Airbnb)
• 💖 Định dạng mã với Prettier
• 🦊 Husky cho Git Hooks
• 🚫 Lint-staged để chạy công cụ linter trên các tệp Git đã tải lên
• 🚓 Lint commit git với Commitlint
• 📓 Viết các thông điệp commit tuân theo tiêu chuẩn với Commitizen
• 🦺 Kiểm thử đơn với Jest và React Testing Library
• 🧪 Kiểm thử E2E với Cypress
• 👷 Chạy kiểm thử trên yêu cầu kéo với GitHub Actions
• 🎉 Storybook cho phát triển giao diện người dùng
• 🎁 Tự động tạo bản thay đổi với Semantic Release
• 🔍 Kiểm thử hình ảnh với Percy (Tùy chọn)
• 💡 Sử dụng nhập tuyệt đối với tiền tố @
• 🗂 Cấu hình VSCode: Gỡ lỗi, Cài đặt, Nhiệm vụ và tiện ích mở rộng cho PostCSS, ESLint, Prettier, TypeScript, Jest
• 🤖 Dữ liệu SEO, JSON-LD và thẻ Open Graph với Next SEO
• 🗺️ Sitemap.xml và robots.txt với next-sitemap
• ⚙️ Bundler Analyzer
• 🖱️ Triển khai bằng một lần nhấp với Vercel hoặc Netlify (hoặc triển khai thủ công lên bất kỳ dịch vụ lưu trữ nào)
• 🌈 Bao gồm một chủ đề tối giản MIỄN PHÍ
• 💯 Tối đa hóa điểm lighthouse

Tính năng tích hợp từ Next.js:

• ☕ Tối thiểu hóa HTML & CSS
• 💨 Tải lại trực tiếp
• ✅ Cache busting

Triết lý

• Tất cả các trang Next.js đều được tạo ra tĩnh theo mặc định. Bạn có thể dễ dàng chuyển sang SSR bằng cách thêm getServerSideProps vào trang của bạn.
• Không có gì được che giấu trước bạn, vì vậy bạn có tự do điều chỉnh cần thiết để phù hợp với nhu cầu và sở thích của bạn.
• Mã tối giản
• Thân thiện với SEO
• 🚀 Sẵn sàng cho sản xuất

Nhà tài trợ

Yêu cầu

• Node.js 16+ và npm

Bắt đầu

Chạy lệnh sau trên môi trường cục bộ của bạn:

git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm install

Sau đó, bạn có thể chạy cục bộ ở chế độ phát triển với tải lại trực tiếp:

npm run dev

Mở http://localhost:3000 bằng trình duyệt yêu thích của bạn để xem dự án của bạn.

.
├── README.md                       # README file
├── __mocks__                       # Mocks for testing
├── .github                         # GitHub folder
├── .husky                          # Husky configuration
├── .vscode                         # VSCode configuration
├── public                          # Public assets folder
├── src
│   ├── layouts                     # Layouts components
│   ├── pages                       # Next JS Pages
│   ├── pages.test                  # Next JS Pages tests (this avoids tests to be treated as a Next.js pages)
│   ├── styles                      # Styles folder
│   ├── templates                   # Default template
│   └── utils                       # Utility functions
├── tailwind.config.js              # Tailwind CSS configuration
└── tsconfig.json                   # TypeScript configuration

Tùy chỉnh

Bạn có thể dễ dàng cấu hình Next.js Boilerplate bằng cách tìm kiếm trong toàn bộ dự án với FIXME: để tùy chỉnh nhanh chóng. Dưới đây là một số tệp quan trọng nhất để tùy chỉnh:

• public/apple-touch-icon.png, public/favicon.ico, public/favicon-16x16.png và public/favicon-32x32.png: biểu tượng trang web của bạn, bạn có thể tạo từ https://favicon.io/favicon-converter/
• src/styles/global.css: tệp CSS của bạn sử dụng Tailwind CSS
• src/utils/AppConfig.ts: tệp cấu hình
• src/templates/Main.tsx: chủ đề mặc định
• next-sitemap.config.js: cấu hình sitemap

Bạn có quyền truy cập vào toàn bộ mã nguồn nếu bạn cần tùy chỉnh nhiều hơn. Mã được cung cấp chỉ là ví dụ để bạn bắt đầu dự án của mình. Trời là giới hạn 🚀.

Định dạng Tin nhắn Commit

Dự án áp dụng Conventional Commits quy định. Điều này có nghĩa rằng tất cả các tin nhắn commit của bạn phải được định dạng theo quy định. Để giúp bạn viết tin nhắn commit, dự án sử dụng Commitizen, một giao diện dòng lệnh tương tác hướng dẫn bạn qua quá trình commit. Để sử dụng nó, chạy lệnh sau:

npm run commit

Một trong những lợi ích của việc sử dụng Conventional Commits là nó cho phép chúng ta tự động tạo tệp CHANGELOG. Nó cũng cho phép chúng ta tự động xác định số phiên tiếp theo dựa trên các loại commit được bao gồm trong một bản phát hành.

Triển khai lên môi trường sản xuất

Bạn có thể xem kết quả ở chế độ sản xuất cục bộ bằng:

$ npm run build
$ npm run start

Các tệp HTML và CSS được tạo ra sẽ được tối giản hóa (tính năng tích hợp từ Next js). Nó cũng sẽ loại bỏ CSS không sử dụng từ Tailwind CSS.

Bạn có thể tạo một bản dựng sản phẩm tối ưu với:

npm run build-prod

Bây giờ, trang web của bạn đã sẵn sàng để triển khai. Tất cả các tệp được tạo ra nằm trong thư mục out, bạn có thể triển khai chúng với bất kỳ dịch vụ lưu trữ nào.

Kiểm tra

Tất cả các bài kiểm tra đều được đặt cùng với mã nguồn trong cùng một thư mục. Do đó, việc tìm kiếm chúng dễ dàng hơn. Thật không may, điều này không thể thực hiện với thư mục pages mà Next.js sử dụng cho định tuyến. Vì vậy, đó là lý do tại sao chúng ta có một thư mục pages.test để viết kiểm tra từ các tệp nằm trong thư mục pages.

Triển khai lên Netlify

Sao chép kho lưu trữ này lên tài khoản GitHub của riêng bạn và triển khai lên Netlify:

Triển khai lên Vercel

Triển khai Next JS Boilerplate này trên Vercel chỉ với một cú nhấp chuột:

Thông tin về VSCode (tùy chọn)

Nếu bạn là người dùng VSCode, bạn có thể có tích hợp tốt hơn với VSCode bằng cách cài đặt phần mở rộng được đề xuất trong .vscode/extension.json. Mã khởi đầu đi kèm với Cài đặt để tích hợp mượt mà với VSCode. Cấu hình Debug cũng được cung cấp cho trải nghiệm gỡ lỗi phía trước và phía sau.

Với các plugin đã được cài đặt trong VSCode của bạn, ESLint và Prettier có thể tự động sửa lỗi trong mã và hiển thị lỗi cho bạn. Tương tự với kiểm tra, bạn có thể cài đặt phần mở rộng VSCode Jest để tự động chạy kiểm tra của bạn và nó cũng hiển thị phạm vi mã trong ngữ cảnh.

Mẹo chuyên nghiệp: nếu bạn cần kiểm tra loại toàn bộ dự án với TypeScript, bạn có thể chạy một bản dựng bằng Cmd + Shift + B trên Mac.

Đóng góp

Mọi người đều được hoan nghênh để đóng góp vào dự án này. Hãy thoải mái mở một vấn đề nếu bạn có câu hỏi hoặc phát hiện lỗi. Hoàn toàn sẵn sàng đón nhận mọi đề xuất và cải tiến.

Giấy phép

Được cấp phép theo Giấy phép MIT, Bản quyền © 2023

Xem GIẤY PHÉP để biết thêm thông tin.

Chi tiết tải xuống:

Tác giả: ixartz
Nguồn: https://github.com/ixartz/Next-js-Boilerplate

Giấy phép: MIT license