🚀 TypeScript in Next.js

Next.js has built-in TypeScript support, allowing you to create a strongly typed, scalable, and maintainable application.

📌 1. Setting Up TypeScript in Next.js

If you don’t have TypeScript installed, run:

bash
npm install --save-dev typescript @types/react @types/node

Then, create a tsconfig.json file by running:

bash
npx next dev

✅ Next.js automatically generates a tsconfig.json file for you.

📌 2. Converting a Next.js Project to TypeScript

Rename your files:

• pages/index.js → pages/index.tsx

• components/Button.js → components/Button.tsx

✅ TypeScript now works with your project!

📌 3. Using TypeScript in a Component

tsx
<h1>{data.message}import { GetStaticProps } from "next";export const getStaticProps: GetStaticProps<{ time: string }> = async () => {  return { props: { time: new Date().toISOString() } };};const Page = ({ time }: { time: string }) => <h1>Page generated at: {time}</h1>;export default Page;

✅ Ensures correct return type for static props!

📌 5. Typing API Routes in Next.js

tsx
import { NextApiRequest, NextApiResponse } from "next";export default function handler(req: NextApiRequest, res: NextApiResponse) {  res.status(200).json({ message: "Hello API" });}

✅ Prevents runtime errors by enforcing request/response types!

📌 6. Benefits of Using TypeScript in Next.js

✔️ Type Safety: Catch errors during development
✔️ Better Code Completion: Helps with auto-suggestions
✔️ Improved Maintainability: Easier to manage large projects

🚀 Summary

• Next.js has built-in TypeScript support

• Use .tsx for React components

• Strongly type getServerSideProps & getStaticProps

• Use NextApiRequest and NextApiResponse for API routes