Getting Started with Next.js 13

Next.js 13 introduces groundbreaking features that revolutionize how we build React applications. Let's explore the key concepts and best practices.

Key Features

1. App Router

The new App Router provides a more intuitive way to handle routing:

// app/blog/[slug]/page.tsx
interface PageProps {
  params: {
    slug: string
  }
}

export default async function BlogPost({ params }: PageProps) {
  const post = await getPost(params.slug)
  
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  )
}

2. Server Components

Server Components are the new default, offering better performance:

// This component runs on the server
async function BlogList() {
  const posts = await getPosts() // Direct database queries
  
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

3. Data Fetching

Simplified data fetching with async components:

async function getData() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 } // Revalidate every hour
  })
  
  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
  
  return res.json()
}

Project Structure

A typical Next.js 13 project structure looks like this:

my-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── blog/
│       └── [slug]/
│           └── page.tsx
├── components/
│   └── ui/
├── lib/
│   └── utils.ts
└── public/
    └── images/

Styling Options

Next.js 13 supports various styling approaches:

/* CSS Modules */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

// Tailwind CSS with TypeScript
interface ButtonProps {
  variant?: 'default' | 'outline'
  size?: 'sm' | 'md' | 'lg'
}

export function Button({ variant = 'default', size = 'md' }: ButtonProps) {
  return (
    <button className={cn(
      "rounded-lg font-medium transition-colors",
      variant === 'outline' && "border-2",
      size === 'sm' && "px-3 py-1 text-sm",
      size === 'md' && "px-4 py-2",
      size === 'lg' && "px-6 py-3 text-lg"
    )}>
      Click me
    </button>
  )
}

Environment Variables

Type-safe environment variables:

// env.mjs
export const env = {
  DATABASE_URL: process.env.DATABASE_URL,
  API_KEY: process.env.API_KEY,
} as const

// Typescript will catch missing environment variables
if (!env.DATABASE_URL) {
  throw new Error("DATABASE_URL is required")
}

Best Practices

1. Use Server Components by Default

   • Only use Client Components when needed (interactivity, browser APIs)
   • Better performance and smaller bundle size

2. Implement Progressive Enhancement

   • Start with server-rendered HTML
   • Add interactivity with JavaScript
   • Ensure core functionality works without JavaScript

3. Optimize Images

   import Image from 'next/image'
   
   export function Hero() {
     return (
       <Image
         src="/hero.jpg"
         alt="Hero image"
         width={1200}
         height={600}
         priority
         className="rounded-lg"
       />
     )
   }
   

Conclusion

Next.js 13 brings significant improvements to React development, making it easier to build performant applications. The new App Router and Server Components provide a solid foundation for modern web development.

Remember to:

• Embrace Server Components
• Use TypeScript for better type safety
• Follow the new data fetching patterns
• Optimize for performance from the start