Bài viết Câu hỏi About RongvangIT
profile Pic
0
0

Đăng ngày:

  76 Lượt xem

Các câu hỏi và lựa chọn khi tạo dự án với create-next-app

JavaScriptNext.jsTypeScript

Tiền đề

Bài viết này nói về Next.js phiên bản 13.4.3.
Hướng dẫn sau đây chỉ là ý kiến cá nhân của tác giả. Hãy tham khảo cho mục đích tham khảo.

Đầu tiên

Bạn bắt đầu học phát triển frontend? Thế thì chắc chắn sẽ chọn học React, rồi chọn học Next.js, phải không nào?
Và sau khi phấn khích, bạn đánh lệnh create-next-app như sau:

$ npx create-next-app my-next-app
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Use App Router (recommended)? … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
✔ What import alias would you like configured? … @/*

Ờm…?

Các câu hỏi được đặt ra

✔ Would you like to use TypeScript with this project?

Bạn có muốn sử dụng TypeScript cho dự án này?

TypeScript là gì?

Ngôn ngữ lập trình giới thiệu tính năng kiểu vào JavaScript.
Trong nhóm phát triển, TypeScript thường được ưa chuộng hơn JavaScript nếu làm việc nhóm.
So với JavaScript, thông tin tiếng Nhật về TypeScript ít (điều này làm cho việc học hơi khó khăn).

Hướng dẫn trả lời

Dưới đây là gợi ý:

  • Biết JavaScript, muốn học TypeScript, biết React: ⇒ Yes
  • Biết JavaScript, muốn học TypeScript, không biết React: ⇒ No
  • Biết JavaScript, không biết TypeScript: ⇒ No
  • Không biết gì cả: ⇒ No

✔Would you like to use ESLint with this project?

Bạn có muốn sử dụng ESLint cho dự án này?

ESLint là gì?

Một công cụ (công cụ phân tích tĩnh) giúp kiểm tra mã nguồn bạn đã tạo một cách tự động.
Nó cũng có chức năng định dạng (format) mã nguồn bạn đã tạo.

Hướng dẫn trả lời

Do hầu hết mọi người đều sử dụng nó và không có điều gì phải lo lắng.

Trả lời
⇒ Yes

✔ Would you like to use Tailwind CSS with this project?

Bạn có muốn sử dụng Tailwind CSS cho dự án này?

Tailwind CSS là gì?

Một framework CSS phổ biến gần đây.
Bạn có thể thiết lập kiểu bằng cách nhập giá trị đã được định nghĩa vào thuộc tính class của thẻ HTML.
Chi phí học tương đối cao và số lượng tệp cấu hình tăng.

Hướng dẫn trả lời

Dưới đây là gợi ý:

  • Hiểu CSS, muốn học Tailwind CSS: ⇒ Yes
  • Hiểu CSS, không muốn học Tailwind CSS: ⇒ No
  • Không hiểu gì cả: ⇒ No

✔ Would you like to use src/ directory with this project?

Bạn có muốn sử dụng thư mục src/ cho dự án này?

Thư mục src/ là gì?

Một thư mục được đặt ngay tại thư mục gốc của dự án Next.js. Bạn có thể sử dụng nó hoặc không.
Khi dự án có quy mô lớn, số lượng tệp mã nguồn sẽ nhiều, việc sử dụng thư mục src/ như là nơi đặt tệp mã nguồn trở nên phổ biến.

Khi không có directory src/

my-next-app
|-- node_modules # Nơi chứa các gói ngoại vi
|-- pages  # Nơi chứa các tệp jsx/tsx (phần này tương ứng với URL và được định tuyến)
|-- public # Nơi chứa các tệp tĩnh
`-- styles # Nơi chứa các tệp css

Khi có directory src/

my-next-app
|-- node_modules # Nơi chứa các gói ngoại vi
|-- public     # Nơi chứa các tệp tĩnh
`-- src
    |-- pages  # Nơi chứa các tệp jsx/tsx (phần này tương ứng với URL và được định tuyến)
    `-- styles # Nơi chứa các tệp css

Hướng dẫn trả lời

Dưới đây là gợi ý:

  • Tôi sẽ tạo một ứng dụng web: ⇒ Yes
  • Không (Chỉ làm Hello World): ⇒ No

Sử dụng App Router (đề xuất)?

App Router là gì?

Là tính năng định tuyến mới của Next.js đã được phát hành vào ngày 05/05/2023, có vẻ đã ổn định. Trước đây, có một tính năng định tuyến gọi là Pages Router, nhưng nay đã có thêm cái mới.
Như có nói trong từ khóa đề xuất, Next.js dường như đang khuyến khích sử dụng App Router trong tương lai.

Hướng dẫn trả lời

Trong thời điểm viết bài (25/05/2023), thông tin về nó khá hiếm hoi.
Nếu bạn là người mới học Next.js, có vẻ tốt hơn là hiểu về Pages Router trước.

Trả lời
⇒ No

✔ Would you like to customize the default import alias?

Bạn có muốn tùy chỉnh định danh nhập mặc định không?

Định danh nhập mặc định là gì?

Từ mô-đun (file) của JavaScript/TypeScript, đọc mô-đun khác được gọi là định danh nhập.

index.jsx

// Đọc mô-đun SamplePageMain.jsx từ mô-đun khác
import { SamplePageMain } from "../../../commponents/mains/SamplePageMain"

Cách viết này, cũng được gọi là đường dẫn tương đối, là cách chính thức, nhưng khi dự án có cấu trúc thư mục phức tạp, nó trở nên khó hiểu. Ví dụ như ../../../ là khó hiểu đúng không?

Giải pháp cho vấn đề này là sử dụng định danh nhập. Mặc định, @/ biểu thị thư mục gốc của mã nguồn.
Nếu sử dụng định danh nhập, ví dụ trên có thể viết lại như sau:

index.jsx

// Đọc mô-đun SamplePageMain.jsx từ mô-đun khác
import { SamplePageMain } from "@/commponents/mains/SamplePageMain"

Hướng dẫn trả lời

Vấn đề này liên quan đến việc thay đổi giá trị mặc định @/ của định danh nhập hay không.
Với người mới học, điều này có vẻ không quan trọng, nên chọn:

Trả lời
⇒ No

## ✔ What import alias would you like configured?
Bạn muốn cấu hình định danh nhập mặc định như thế nào?

Đã trả lời câu hỏi trước đó là Yes.

Người mới học không có ý định thay đổi định danh nhập mặc định.
Những người muốn trả lời “Yes” cho mọi thứ được đề xuất.

Hướng dẫn trả lời

Nếu không muốn suy nghĩ gì nhiều, chỉ cần nhấn Enter, giá trị mặc định sẽ được cấu hình cuối cùng.

Nhận xét

create-next-app không phải là một công cụ học dành cho người mới, mà chỉ là một công cụ tạo ra nhanh chóng một dự án Next.js.
Vì vậy, nếu bạn là người muốn thử nghiệm Next.js vì mục đích học, việc này có vẻ là điểm bắt đầu khó khăn. Ít nhất là tôi đã trải qua trạng thái như là “Ê, cái gì đây…?” như bạn nói.

dev_pro_it
Đang làm IT tại Japan

Bình luận

Bài viết chưa có bình luận. Hãy trở thành người bình luận đầu tiên!
Sign up for free and join this conversation.
Sign Up
If you already have a RongvangIT account Login
Danh sách thư mục
Bắt đầu ngay với RồngVàngIT - nền tảng chia sẻ kiến thức lập trình tuyệt vời cho kỹ sư Việt Nam!

Hãy đăng nhập để sử dụng hàng loạt các chức năng tuyệt vời của RồngVàngIT !

  1. 1. Bạn sẽ nhận được các bài viết phù hợp bằng chức năng theo dõi tag và người dùng.
  2. 2. Bạn có thể đọc lại các thông tin hữu ích bằng chức năng lưu trữ nội dung.
  3. 3. Chia sẻ kiến thức, đặt câu hỏi và ghi lại quá trình trưởng thành của mình cùng RồngVàngIT !
Tạo tài khoản Đăng nhập
profile Pic