name: nextjs-dev description: Next.js development conventions and patterns for kimmoihanus.com. Use when working on pages, components, or API routes in this project.

Next.js Development

Development conventions and patterns for the kimmoihanus.com Next.js site.

When to Use

• Creating new pages or components
• Working with API routes
• Styling with Tailwind CSS
• Working with MDX content

Project Structure

/
├── components/     # React components
├── css/           # Stylesheets (Tailwind, Prism)
├── graphics/      # Graphics markdown files
├── lib/           # Utility functions and hooks
├── pages/         # Next.js pages (file-based routing)
│   ├── api/       # API routes
│   ├── graphics/  # Dynamic graphics pages
│   └── posts/     # Dynamic post pages
├── posts/         # Blog post markdown files
├── prose/         # Static prose content
├── public/        # Static assets
└── tools/         # Additional tools and MCP servers

Conventions

Pages

• Pages use file-based routing in /pages/
• Dynamic routes use [slug].js format
• API routes go in /pages/api/

Components

• Components are in /components/
• Use functional components with hooks
• Export default the main component

Styling

• Use Tailwind CSS classes
• Custom styles in /css/ directory
• Module CSS for component-specific styles (e.g., graphics.module.css)

Content

• Blog posts: /posts/XXX-slug.md
• Graphics: /graphics/slug.md
• Static prose: /prose/slug.md

Key Libraries

• next - Framework
• next-seo - SEO configuration
• next-mdx-remote - MDX rendering
• tailwindcss - Styling
• gray-matter - Frontmatter parsing

Development Commands

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Generate sitemap
npm run postbuild

Creating New Pages

1. Add file to /pages/ directory
2. Export a default React component
3. Optionally export getStaticProps or getServerSideProps

Example:

import Layout from '../components/Layout';
import { NextSeo } from 'next-seo';

export default function MyPage() {
  return (
    <Layout>
      <NextSeo title="My Page" />
      <h1>My New Page</h1>
    </Layout>
  );
}

Creating API Routes

Add file to /pages/api/:

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  // Your logic here
  res.status(200).json({ success: true });
}

Working with MDX Content

Use the lib functions:

import { getPostBySlug, getAllPosts } from '../lib/posts';
import { serialize } from 'next-mdx-remote/serialize';