Tạo project với Next.js và TypeScript
Bài viết này mình viết như một ghi chú cho những lần cần tạo project. Các bạn có thể tham khảo hoặc nếu thấy phù hợp ^^
Lúc trước thì mình hay sử dụng js hơn là ts, đôi lúc có ác cảm với ts vì thấy nó khá là lằng nhằng, tuy nhiên khi sử dụng một thời gian rồi thì mình cảm thấy khá thú vị.
Với những bạn giống mình và muốn thử xem ts có gì vui thì có thể setup một cái project và tự cảm nhận nhé
- Next v13
- Node 14.6.0 or newer.
- MacOS, Windows (including WSL), and Linux are supported.
- TypeScript v4.9.
Bắt đầu
Có 2 cách để setup TypeScript với Nextjs:
- Sử dụng
create-next-app. - Thêm TypeScript vào dự án hiện tại.
create-next-app
Chúng ta có thể bắt đầu dự án Next.js với TypeScript bằng cách sử dụng CLI tool create-next-app và thêm cờ --typescript hoặc --ts phía sau.
1 2 3 4 5 6 | npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript |
Thêm TypeScript vào dự án Next.js hiện tại
Đầu tiên, chúng ta cần tạo file tsconfig.json ở thư mục gốc của dự án: touch tsconfig.json
Sau đó bạn chạy lệnh để start application, ở đây scripts để start application của mình là yarn dev.
Next.js sẽ thông báo và cố gắng cài các package liên quan đến TypeScript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | It looks like you're trying to use TypeScript but do not have the required package(s) installed. Installing dependencies If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory). Installing devDependencies (yarn): - typescript - @types/react - @types/node [1/4] Resolving packages... [2/4] Fetching packages... |
Sau khi cài đặt hoàn thành, mở file tsconfig.json các bạn sẽ thấy nó giống bên dưới:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <span class="token punctuation">{</span> <span class="token property">"compilerOptions"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"target"</span><span class="token operator">:</span> <span class="token string">"es5"</span><span class="token punctuation">,</span> <span class="token property">"lib"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"dom"</span><span class="token punctuation">,</span> <span class="token string">"dom.iterable"</span><span class="token punctuation">,</span> <span class="token string">"esnext"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token property">"allowJs"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token property">"skipLibCheck"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token property">"strict"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token property">"forceConsistentCasingInFileNames"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token property">"noEmit"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token property">"incremental"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token property">"esModuleInterop"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token property">"module"</span><span class="token operator">:</span> <span class="token string">"esnext"</span><span class="token punctuation">,</span> <span class="token property">"moduleResolution"</span><span class="token operator">:</span> <span class="token string">"node"</span><span class="token punctuation">,</span> <span class="token property">"resolveJsonModule"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token property">"isolatedModules"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token property">"jsx"</span><span class="token operator">:</span> <span class="token string">"preserve"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"include"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"next-env.d.ts"</span><span class="token punctuation">,</span> <span class="token string">"**/*.ts"</span><span class="token punctuation">,</span> <span class="token string">"**/*.tsx"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token property">"exclude"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"node_modules"</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> |
Nếu bạn để ý thì sẽ thấy một file next-env.d.ts, file này đảm bảo Next.js types sẽ được trình biên dịch TypeScript chọn.
Tới đây thì việc thêm TypeScript vào dự án Next.js đã xong. Các bạn bắt đầu code được rồi.
Đối với các bạn mới mới dùng TypeScript và Next.js thì có thể tham khảo thêm 2 link dưới đây để thực hành ^^
React + TypeScript cheatsheet: https://react-typescript-cheatsheet.netlify.app/
NextJS + TypeScript: https://nextjs.org/docs/basic-features/typescript
Kết Luận
Việc cài đặt Next.js với TypeScript thật sự không quá khó phải không nào,
Trong lúc cài đặt thì có thể có một số lỗi liên quan đến version Next.js và TypeScript, tuy nhiên cũng không quá phức tập để giải quyết.
Hẹn gặp lại các bạn ở các bài viết khác !!!