Next.js Development

Name: nextjs-dev
Rating: 65
Author: ihmissuti

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

code

/
├── 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

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

bash

# 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

•Add file to /pages/ directory
•Export a default React component
•Optionally export getStaticProps or getServerSideProps

Example:

jsx

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';