NextJS TypeScript: Cách tạo dự án NextJS với TypeScript

Nội dung bài viết

Next.js là một framework web React, trong khi TypeScript là một ngôn ngữ lập trình mở rộng của JavaScript. Kết hợp giữa NextJS TypeScript không chỉ xây dựng ứng dụng nhanh chóng mà còn đảm bảo mã nguồn an toàn và dễ bảo trì.

Đọc bài viết sau đây để được hiểu rõ hơn về:

Tổng quan về Nextjs và TypeScript
Cách sử dụng TypeScript trong dự án Nextjs API
Cách gỡ lỗi ứng dụng Nextjs và TypeScript
Một số câu hỏi thường gặp về Nextjs

NextJS là gì? TypeScript là gì?

NextJS là một framework phổ biến dựa trên React giúp xây dựng ứng dụng web dễ dàng. Nó cung cấp nhiều tính năng hữu ích như kết xuất phía máy chủ (Server-side Rendering), Static Site Generation, App Router và Page Router, Zero-config bundling và code splitting, Tối ưu hóa hình ảnh và font tự động, API Routes tích hợp sẵn.

TypeScript là siêu tập JavaScript kiểu tĩnh mang lại nhiều lợi ích cho phát triển web, chẳng hạn như chất lượng mã được cải thiện, tổ chức mã tốt và phát hiện lỗi sớm hơn. TypeScript là lựa chọn phổ biến của nhiều lập trình viên và được sử dụng rộng rãi trong cộng đồng React.

Lợi ích khi sử dụng TypeScript trong Nextjs:

Chất lượng mã tốt hơn: TypeScript cung cấp kiểu mã tĩnh giúp phát hiện lỗi tại thời điểm biên dịch mã. Điều này giúp viết mã không có lỗi và dễ bảo trì hơn.
Cải thiện tổ chức mã: TypeScript cho phép bạn xác định giao diện và type, giúp dễ dàng suy luận về mã và giảm nguy cơ xảy ra các tình trạng không mong muốn.
Phát hiện lỗi sớm: TypeScript cung cấp hỗ trợ trình chỉnh sửa phong phú, bao gồm hoàn thành mã, tô sáng lỗi,… giúp bạn phát hiện lỗi sớm trong quá trình phát triển mã.

Cách thêm TypeScript vào ứng dụng Nextjs

Nextjs cung cấp hỗ trợ tích hợp cho TypeScript với các kiểu tích hợp cho trang, API hoặc phương thức truy xuất dữ liệu,… Bạn có thể thêm TypeScript vào dự án bằng cách sử dụng create-next-app hoặc thêm thủ công.

Nếu thêm TypeScript bằng create-next-app, bạn khởi động ứng dụng Nextjs bằng TypeScript sau đó thêm đoạn mã –typescript hoặc –ts vào lệnh create-next-app. Cụ thể:

npx create-next-app@latest --ts

hoặc

npx create-next-app@latest --typescript

Bên cạnh đó, bạn có thể thêm TypeScript theo cách thủ công bằng cách tạo một tệp tsconfig.json trong thư mục gốc. File này sẽ chỉ định các file gốc và các tùy chọn trình biên dịch cần thiết để biên dịch dự án. Đồng thời được Nextjs tự động điền các giá trị mặc định.

touch tsconfig.json

Tiếp theo, bạn chạy npm run dev hoặc yarn dev (nếu bạn sử dụng Yarn) để khởi động máy chủ. Lúc này, Nextjs sẽ phát ra một thông báo trong terminal và thử cài đặt các gói liên quan đến TypeScript.

Khi quá trình cài đặt kết thúc, bạn mở tsconfig.json và sẽ thấy được các giá trị như hình bên dưới:

Đoạn mã được hiển thị khi thêm TypeScript vào Nextjs bằng cách thủ công (Nguồn: refine.dev)

Ngoài ra, Nextjs cũng tạo một file mới với next-env.d.ts trong thư mục gốc của dự án. File này sẽ đảm bảo các kiểu Nextjs được trình biên dịch chọn và không nên chỉnh sửa hoặc xóa.

Sau khi đã cài đặt TypeScript vào Nextjs, bạn có thể bắt đầu tạo các file có phần mở rộng là .ts và .tsx trong ứng dụng của mình. Có thể chuyển đổi các file .js thành .ts và .jsx thành .tsx

Cách sử dụng TypeScript trong phương thức truy xuất dữ liệu (data fetching methods)

Next.js cung cấp hai cách tiếp cận cho việc truy xuất dữ liệu: Pages Router (truyền thống) và App Router (modern). Dưới đây là cách sử dụng TypeScript cho cả hai phương pháp:

Pages Router (Truyền thống)

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from "next";

export const getStaticProps: GetStaticProps = async (context) => {};
export const getStaticPaths: GetStaticPaths = async () => {};
export const getServerSideProps: GetServerSideProps = async (context) => {};

Nextjs cũng cung cấp các kiểu tích hợp để suy ra các kiểu (type) cho props từ getServerSideProps và getStaticProps. Nếu bạn muốn có các type suy ra cho props có thể sử dụng lệnh sau trên một thành phần trang.

InferGetStaticPropsType<typeof getStaticProps>

// hoặc

InferGetServerSidePropsType<typeof getServerSideProps>

Ví dụ với Pages Router:

type PostProps = {
    userId: number,
    id: number,
    title: string,
    body: string
}

export const getStaticProps: GetStaticProps<{posts: PostProps[]}> = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await response.json();
    return {
        props: {
            posts,
        },
        revalidate: 60 // [UPDATED] Thêm ISR option
    }
}

// Cách 1: Định nghĩa type trực tiếp
function PostPage({ posts }: { posts: PostProps[] }) {
    // ...
}

// Cách 2: Sử dụng InferGetStaticPropsType
import { InferGetStaticPropsType } from 'next'
function PostPage({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
    // ...
}

export default PostPage

App Router (Next.js 13+)

// app/posts/page.tsx
async function getPosts(): Promise<PostProps[]> {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
    if (!res.ok) throw new Error('Failed to fetch posts')
    return res.json()
}

export default async function PostsPage() {
    const posts = await getPosts()
    return (
        <div>
            {posts.map(post => (
                <div key={post.id}>{post.title}</div>
            ))}
        </div>
    )
}

Những lưu ý quan trọng:

App Router không cần getStaticProps/getServerSideProps
Fetch requests được tự động dedupe và cache
Server Components có hỗ trợ TypeScript tốt hơn
Có thể sử dụng async/await trực tiếp trong components
TypeScript tự động suy luận types cho data fetching

Cách sử dụng TypeScript trong Nextjs API

Next.js cung cấp hai cách để xây dựng API endpoints với TypeScript:

Pages Router API (pages/api)

import type { NextApiRequest, NextApiResponse } from "next"

type Data = {
  name: string
  age: number // [UPDATED] Thêm type chính xác
}

export default function handler(
  req: NextApiRequest, 
  res: NextApiResponse<Data>
) {
  if (req.method === 'GET') { // [UPDATED] Thêm method check
    res.status(200).json({ name: "John", age: 25 })
  }
}

App Router API (app/api)

import { NextRequest, NextResponse } from 'next/server'

type Data = {
  name: string
  age: number
}

export async function GET(request: NextRequest) {
  return NextResponse.json<Data>({ name: "John", age: 25 })
}

Cách gỡ lỗi trong ứng dụng NextJS và TypeScript

Debug trong ứng dụng Nextjs và TypeScript có thể là một thách thức, nhưng với nhiều công cụ và kỹ thuật có sẵn sẽ giúp bạn thực hiện điều này dễ dàng hơn.

Để debug, bạn có thể tham khảo qua một số mẹo như sau:

Sử dụng trình gỡ lỗi: Hiệu quả hơn so với việc sử dụng câu lệnh console.log trong VSCode hay các IDE khác có tích hợp công cụ gỡ lỗi tương thích với Nextjs và TypeScript.
Bật bản đồ nguồn (sources map): Cho phép bạn ánh xạ mã TypeScript để biên dịch vào file gốc, giúp debug dễ dàng hơn. Nextjs tạo bản đồ nguồn theo mặc định, nhưng bạn có thể cần định cấu hình IDE để sử dụng chúng.
Kiểm tra cấu hình TypeScript: Đảm bảo cấu hình chính xác và đã được cập nhật.Nếu có lỗi trong cấu hình có thể dẫn đến việc ngăn chặn quá trình biên dịch mã.
Sử dụng –inspect: Cho phép bạn đính kèm trình gỡ lỗi vào quy trình NodeJS đang chạy. Điều này sẽ hữu ích khi debug mã ở phía máy chủ trong Nextjs.

Câu hỏi thường gặp về NextJS TypeScript

Có thể sử dụng Nextjs mà không cần TypeScript không?

Câu trả lời là có, Next.js có thể được sử dụng mà không cần TypeScript. Tuy nhiên, sử dụng TypeScript có thể đem lại trải nghiệm tốt hơn cho nhà phát triển và mã mạnh mẽ hơn.

Có thể sử dụng dùng Nextjs với JavaScript thay vì TypeScript không?

Câu trả lời là có. Bạn có thể sử dụng Nextjs với JavaScript thay vì TypeScript. Bởi vì Nextjs có hỗ trợ cả JavaScript và TypeScript trong quá trình làm việc.

Nextjs TypeScript như thế nào so với các framework khác?

Next.js TypeScript là sự kết hợp mạnh mẽ giữa framework và ngôn ngữ lập trình. Các lợi ích như khả năng mở rộng, năng suất và khả năng bảo trì khiến chúng trở thành công cụ mạnh mẽ cho việc xây dựng các ứng dụng web quy mô lớn.

Tổng kết về NextJS TypeScript

Như vậy, ITviec Blog đã giải đáp chi tiết về cách bắt đầu kết hợp TypeScript trong các ứng dụng Next.js. Bên cạnh đó, tầm quan trọng và lợi ích liên quan đến việc kết hợp các khả năng của Nextjs TypeScript để đem lại trải nghiệm phát triển ứng dụng nhanh hơn. Hy vọng bài viết này giúp bạn cân nhắc cũng như có được quyết định thích hợp khi lựa chọn TypeScript và Next.js vào các ứng dụng của mình.