Getting Started with Next.js and TypeScript

Next.js has become one of the most popular frameworks for building modern web applications. Combined with TypeScript, it provides a powerful development experience with type safety and excellent performance.

Why Next.js?

Next.js offers several key advantages for web development:

Server-Side Rendering (SSR): Improved SEO and faster initial page loads
Static Site Generation (SSG): Pre-render pages at build time for optimal performance
API Routes: Build your backend API alongside your frontend
File-based Routing: Intuitive routing based on your file structure
TypeScript Support: First-class TypeScript integration out of the box

Setting Up Your Project

To create a new Next.js project with TypeScript, run:

npx create-next-app@latest my-app --typescript
cd my-app
npm run dev

This will set up a new Next.js 15 project with TypeScript configuration included.

Project Structure

A typical Next.js project structure looks like this:

my-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
│   └── images/
├── components/
│   └── ui/
├── lib/
│   └── utils.ts
└── package.json

The app directory is the core of your application using the App Router, introduced in Next.js 13 and refined in Next.js 15.

Server Components

Next.js 15 uses Server Components by default, which means components render on the server unless explicitly marked as client components:

// This is a Server Component (default)
export default function HomePage() {
  return (
    <div>
      <h1>Welcome to Next.js</h1>
      <p>This component renders on the server</p>
    </div>
  )
}

For interactive components that need client-side JavaScript, use the 'use client' directive:

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

Routing

Next.js uses file-based routing. Create a new page by adding a file in the app directory:

app/
├── page.tsx          # /
├── about/
│   └── page.tsx      # /about
└── blog/
    ├── page.tsx      # /blog
    └── [slug]/
        └── page.tsx  # /blog/[slug]

TypeScript Best Practices

When working with Next.js and TypeScript:

Define interfaces for your data:

interface BlogPost {
  id: string
  title: string
  content: string
  date: string
}

Use typed props:

interface PageProps {
  params: { slug: string }
  searchParams: { [key: string]: string | undefined }
}

export default function Page({ params, searchParams }: PageProps) {
  return <div>Blog post: {params.slug}</div>
}

Leverage type inference where possible to keep code clean

Deployment

Deploy your Next.js application to Vercel with a single command:

npm run build
vercel --prod

Or use other platforms like Netlify, AWS, or your own server.

Conclusion

Next.js 15 with TypeScript provides a robust foundation for building modern web applications. Its combination of server-side rendering, static generation, and client-side interactivity makes it suitable for projects of any scale.

Start building your next project with Next.js and experience the benefits of this powerful framework!