نحوه استفاده از TypeScript در Next.js

همیشه در هنگام شروع یک پروژه برایمان خیلی مهم است که از چه زبانی و از چه فریمورک های بسته به کار و منابعی که داریم انتخاب کنیم، و گزینه های بسیار زیادی وجود دارد. ما در این مقاله می خواهیم درباره نحوع استفاده از تایپ اسکریپت (TypeScript) در Next.js بپردازیم. با ما همراه باشید.

Next.js به شما امکان می دهد با استفاده از React برنامه های استاتیک و پویا (سمت سرور) بسازید. با قابلیت های کاربردی مانند:

• مسیرهای API
• مسیریابی سیستم فایل
• بهینه سازی تصویر
• Middlewares
• پشتیبانی از ماژول های ES و ایمپوت URL
• کامپوننت های سرور
• استریم HTTP
• Next.js Live

Next.js با TypeScript تحت Hood ساخته شده است، بنابراین شما IntelliSense و تعاریف تایپ بهتری را در ویرایشگر خود به طور پیش فرض فقط با جاوا اسکریپت دریافت می کنید. اما وقتی آن را با TypeScript ترکیب می‌کنید، می‌توانید تجربه توسعه‌دهنده بهتری را به دست آورید - از جمله بازخورد فوری وقتی که کامپوننت شما انتظار پشتیبانی دارد، اما شما هیچ کدام را قبول نکردید.

شما همچنین می توانید با تایپ ها export هایی Next بسازید و تایپ خود را برای ساخت در برنامه های خود تعریف کنید. این تایپ ها به کد شما کمک می‌کنند تا ساختار بهتری را با دیکته کردن آبجکت ها، آرایه‌ها و …شما از قبل تعیین کنند. به این ترتیب، شما، ویرایشگر کدتان و هر توسعه‌دهنده‌ای که پس از شما می دانید که چگونه به کدتان ارجاع دهید.

ویژگی‌های Next، ساخت برنامه‌های React را از روت های ساده گرفته تا ویژگی‌های افزایش‌دهنده عملکرد مانند بهینه‌سازی تصویر، آسان‌تر از همیشه می‌کنند.

در این آموزش، نحوه استفاده از Next.js با TypeScript را به شما نشان می‌دهیم و شما را با یک استک هیجان‌انگیز و مدرن برای ساخت اپلیکیشن‌های با کیفیت بالا، بهینه‌سازی جستجو و قابل پیش‌بینی آشنا می‌کنیم.

برای نمایش Next.js و TypeScript در عمل، نحوه ساخت یک برنامه مدیریت مقاله ساده را توضیح خواهیم داد. برنامه مثال ما داده‌ها را از placeholder JSON بازیابی می‌کند.

Next.js چیست؟

Next.js یک فریمورک production-ready است که بر روی React و Node.js ساخته شده است. آن را با تمام ویژگی های ذکر شده در بالا و بیشتر دارا می باشد.

می‌توانید از Next.js برای ساخت برنامه‌های استاتیک و پویا استفاده کنید، زیرا از رندر سمت کلاینت و سرور پشتیبانی می‌کند. Next.js 9 مسیرهای API را معرفی کرد که به شما امکان می دهد برنامه Next خود را با یک بک اند واقعی (بدون سرور) ساخته شده با Node.js، Express.js، GraphQL و غیره گسترش دهید. جدیدترین نسخه وقتی که این مقاله نوشته شده، Next.js 13 است که دارای:

•  API متادیتای مبتنی بر فایل
• تصاویر Open Graph پویا
• Export استاتیک برای روتر برنامه
• روت های موازی و Interception

Next.js از تقسیم خودکار کد (lazy loading) استفاده می کند تا فقط جاوا اسکریپت مورد نیاز برای برنامه شما را ارائه کند. Next.js همچنین می‌تواند صفحات شما را در زمان ساخت به‌صورت درخواستی از قبل رندر کند، که می‌تواند باعث شود برنامه‌تان احساس راحتی کند، زیرا مرورگر مجبور نیست برای اجرای بسته جاوا اسکریپت زمان صرف کند تا HTML برای برنامه شما تولید کند و این امکان را فراهم می‌کند که خزنده های موتورهای جستجو بیشتر برای فهرست کردن برنامه شما، که به نوبه خود برای سئو عالی است.

TypeScript چیست؟

TypeScript یک زبان محبوب است که توسط مایکروسافت ساخته شده و پشتیبانی می شود. این یک ابر مجموعه جاوا اسکریپت است، به این معنی که تمام جاوا اسکریپت معتبر Typescript معتبر است.

می توانید برنامه جاوا اسکریپت موجود خود را به TypeScript تبدیل کنید و تا زمانی که کد شما جاوا اسکریپت معتبر باشد، باید همانطور که انتظار می رود کار کند. TypeScript به شما اجازه می دهد تا انواع متغیرها و توابع خود را تنظیم کنید تا بتوانید کد خود را به صورت ایستا تایپ کرده و در زمان کامپایل خطاها را دریافت کنید.

همچنین می توانید از ویژگی های مدرنی که هنوز در جاوا اسکریپت پشتیبانی نمی شوند استفاده کنید. و نگران پشتیبانی مرورگر نباشید - TypeScript به جاوا اسکریپت ساده کامپایل می شود، به این معنی که کد TypeScript شما هرگز در مرورگر ارسال نمی شود.

استفاده از TypeScript در برنامه Next.js

برای ایجاد یک برنامه Next.js جدید، می توانید از Create Next App استفاده کنید.

با باز کردن خط فرمان (CLI) و اجرای دستور زیر شروع کنید:

npm create-next-app next-typescript-example

این دستور یک برنامه Next.js جدید ایجاد می کند. حالا بیایید ساختار پروژه را به صورت زیر بسازیم:

src
├── components
|  ├── AddPost.tsx
|  └── Post.tsx
├── pages
|  ├── index.tsx
|  └── _app.tsx
├── styles
|  └── index.css
├── tsconfig.json
├── types
|  └── index.ts
├── next-env.d.ts
└── package.json

برای فعال کردن TypeScript در برنامه Next.js، یک فایل tsconfig.json را به روت اصلی پروژه اضافه کنید. Next.js فایل را می شناسد و از TypeScript برای پروژه استفاده می کند.

با این کار، اکنون می‌توانیم فایل‌هایی با پسوندهای ts. یا tsx. ایجاد کنیم. Next.js کامپایل کد TypeScript را در جاوا اسکریپت انجام می دهد و سپس برنامه ما را طبق معمول در مرورگر ارائه می دهد.

ایجاد تایپ های TypeScript در Next.js

شما می توانید برای هر چیزی در برنامه خود تایپ ایجاد کنید، از جمله تایپ prop، پاسخ های API، آرگومان هایی برای توابع کاربردی خود، و حتی ویژگی های حالت گلوبال خود!

ابتدا یک تایپ برای پست های خود ایجاد می کنیم. رابط زیر شکل یک آبجکت Post را منعکس می کند. انتظار دارد مشخصات id، عنوان(title) و بدنه(body).

// types/index.ts

export interface IPost {
  id: number
  title: string
  body: string
}

ایجاد کامپوننت در Next.js

اکنون که نوع پست (IPost) آماده استفاده است، بیایید کامپوننت‌های React را ایجاد کرده و تایپ ها را تنظیم کنیم.

// components/AddPost.tsx

import * as React from 'react'
import { IPost } from '../types'

type Props = {
  savePost: (e: React.FormEvent, formData: IPost) => void
}

const AddPost: React.FC<Props> = ({ savePost }) => {
  const [formData, setFormData] = React.useState<IPost>()

  const handleForm = (e: React.FormEvent<HTMLInputElement>): void => {
    setFormData({
      ...formData,
      [e.currentTarget.id]: e.currentTarget.value,
    })
  }

  return (
    <form className='Form' onSubmit={(e) => savePost(e, formData)}>
      <div>
        <div className='Form--field'>
          <label htmlFor='name'>Title</label>
          <input onChange={handleForm} type='text' id='title' />
        </div>
        <div className='Form--field'>
          <label htmlFor='body'>Description</label>
          <input onChange={handleForm} type='text' id='body' />
        </div>
      </div>
      <button
        className='Form__button'
        disabled={formData === undefined ? true : false}
      >
        Add Post
      </button>
    </form>
  )
}

export default AddPost

همانطور که می بینید، ما با وارد کردن نوع IPost شروع می کنیم. پس از آن، نوع دیگری به نام Props ایجاد می کنیم که prop های دریافت شده به عنوان پارامتر توسط کامپوننت را منعکس می کند.

در مرحله بعد، نوع IPost را در useState Hook تنظیم می کنیم. سپس، از آن برای مدیریت داده های فرم استفاده می کنیم. هنگامی که فرم ارسال شد، برای ذخیره داده ها در آرایه پست ها به تابع savePost تکیه می کنیم.

اکنون، می توانیم یک پست جدید ایجاد و ذخیره کنیم.

بیایید به کامپوننتی که مسئول نمایش آبجکت Post است برویم.

// components/Post.tsx

import * as React from 'react'
import { IPost } from '../types'

type Props = {
  post: IPost
  deletePost: (id: number) => void
}

const Post: React.FC<Props> = ({ post, deletePost }) => {
  return (
    <div className='Card'>
      <div className='Card--body'>
        <h1 className='Card--body-title'>{post.title}</h1>
        <p className='Card--body-text'>{post.body}</p>
      </div>
      <button className='Card__button' onClick={() => deletePost(post.id)}>
        Delete
      </button>
    </div>
  )
}

export default Post

این کامپوننت Post، آبجکت پست را برای نمایش و یک تابع deletePost به عنوان props دریافت می کند. برای بهینه کردن TypeScript، آرگومان ها باید با Props مطابقت داشته باشند.

اکنون می‌توانیم پست‌ها را اضافه، نمایش و حذف کنیم. بیایید کامپوننت ها را در فایل App.tsx وارد کنیم و منطقی برای مدیریت پست ها ایجاد کنیم.

import * as React from 'react'
import { InferGetStaticPropsType } from 'next'
import AddPost from '../components/AddPost'
import Post from '../components/Post'
import { IPost } from '../types'

const API_URL: string = 'https://jsonplaceholder.typicode.com/posts'

export default function IndexPage({
  posts,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const [postList, setPostList] = React.useState(posts)

  const addPost = async (e: React.FormEvent, formData: IPost) => {
    e.preventDefault()
    const post: IPost = {
      id: Math.random(),
      title: formData.title,
      body: formData.body,
    }
    setPostList([post, ...postList])
  }

  const deletePost = async (id: number) => {
    const posts: IPost[] = postList.filter((post: IPost) => post.id !== id)
    console.log(posts)
    setPostList(posts)
  }

  if (!postList) return <h1>Loading...</h1>

  return (
    <main className='container'>
      <h1>My posts</h1>
      <AddPost savePost={addPost} />
      {postList.map((post: IPost) => (
        <Post key={post.id} deletePost={deletePost} post={post} />
      ))}
    </main>
  )
}

export async function getStaticProps() {
  const res = await fetch(API_URL)
  const posts: IPost[] = await res.json()

  return {
    props: {
      posts,
    },
  }
}

در این کامپوننت ابتدا تایپ ها و کامپوننت هایی که قبلا ایجاد شده اند را وارد می کنیم. نوع InferGetStaticPropsType که توسط Next.js ارائه شده است، به ما امکان می دهد تا تایپ را روی متد getStaticProps تنظیم کنیم. این نوع تعریف شده بر روی props بازگشتی توسط getStaticProps را استنباط می کند.

پس از آن، با استفاده از useState Hook، می آیم state را با آرایه پست ها مقداردهی اولیه می کنیم. در مرحله بعد، تابع addPost را برای ذخیره داده ها در آرایه پست ها اعلام می کنیم. متد deletePost نیز  id پست را به عنوان آرگومان دریافت می کند که به ما امکان می دهد آرایه را فیلتر کرده و پست را حذف کنیم.

در نهایت، ما قطعات مورد انتظار را به کامپوننت منتقل می کنیم. سپس داده های پاسخ را حلقه زده و با استفاده از کامپوننت Todo نمایش می دهیم. داده ها از API JSON با کمک متد getStaticProps ارائه شده توسط Next.js بازیابی می شوند.

تنظیم نوع پست‌ها به‌عنوان آرایه‌ای از اشیاء با ساختار تعریف‌شده توسط IPost به ما و ویرایشگر ما کمک می‌کند تا بدانیم دقیقاً چه فیلدهایی از پاسخ API در دسترس ما هستند.

می‌توانید از روش getServerSideProps، Fetch یا یک کتابخانه برای Fetch داده‌ها استفاده کنید. این فقط این است که می خواهید برنامه Next.js خود را چگونه رندر کنید.

می‌توانید از روش getServerSideProps، Fetch یا یک کتابخانه برای واکشی داده‌ها استفاده کنید.

در این نسخه ی دمو، ما برنامه خود را با تولید استاتیک صفحات رندر می کنیم، به این معنی که Next.js فایل های HTML را با جاوا اسکریپت کمی در زمان ساخت تولید می کند و در هر درخواست همان فایل HTML ارائه می شود. به دلیل مزایای عملکردی که از ارائه فایل های HTML از پیش تولید شده برخوردار است، ایجاد صفحات به صورت ایستا روشی توصیه شده برای ارائه برنامه شما است.

رندر سمت سرور نیز یک گزینه است، این روش هر بار که درخواستی به سرور ارسال می شود، یک فایل HTML تازه تولید می کند. این حالتی است که از getServerSideProps برای آن استفاده می کنید.

آزمایش برنامه Next.js شما

با این کد نهایی، برنامه آماده آزمایش در مرورگر است. با پیدا کردن ریشه پروژه و اجرای این دستور شروع کنید:

yarn dev

یا اگر از npm استفاده می کنید:

npm run dev

اگر همه چیز همانطور که انتظار می رود کار کند، باید برنامه Next را در /http://localhost:3000 ببینید.

نتیجه

در این آموزش نحوه استفاده از TypeScript با Next.js را با ساختن یک برنامه مدیریت پست توضیح دادیم.

Next.js واقعاً از TypeScript پشتیبانی می کند و راه اندازی آن آسان است. این امر ساخت برنامه‌های React با تایپ قوی با Next.js و TypeScript را که روی کلاینت یا سرور اجرا می‌شوند، ساده می‌کند. به بیان ساده، Next.js و TypeScript یک استک بسیار هیجان انگیز است که می توانید در پروژه بعدی React خود امتحان کنید.