nextjs

What I do

• Build server-side rendered React applications
• Create API routes and serverless functions
• Implement file-based routing with dynamic routes
• Use getStaticProps, getServerSideProps, and getStaticPaths
• Optimize performance with SSR, SSG, and ISR
• Handle authentication with NextAuth.js
• Use TypeScript for type safety

When to use me

When building modern React applications with SSR, API routes, or full-stack capabilities.

Pages Router

// pages/index.tsx
import { GetServerSideProps } from 'next'

interface Props {
  data: User[]
}

export const getServerSideProps: GetServerSideProps<Props> = async () => {
  const res = await fetch('https://api.example.com/users')
  const data = await res.json()
  
  return {
    props: { data },
  }
}

export default function Home({ data }: Props) {
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

App Router (Next.js 13+)

// app/page.tsx
import { getData } from '@/lib/data'

export default async function Page() {
  const data = await getData()
  
  return <main>{data.title}</main>
}

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// app/api/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
  return NextResponse.json({ message: 'Hello' })
}

Dynamic Routes

// app/posts/[id]/page.tsx
interface Props {
  params: { id: string }
}

export default async function Post({ params }: Props) {
  const post = await fetchPost(params.id)
  return <article>{post.content}</article>
}

export async function generateStaticParams() {
  const posts = await fetchAllPosts()
  return posts.map(post => ({ id: post.id }))
}

Client Components

'use client'

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  )
}

Server Actions

// app/actions.ts
'use server'

export async function createUser(formData: FormData) {
  const name = formData.get('name')
  // Database operation
  await db.user.create({ name: name as string })
  revalidatePath('/users')
}