Next.js Project Setup Guide

A step-by-step guide to set up a modern Next.js project with all the essential features.

1. Create Next.js App

Option 1: Interactive Setup

Follow the prompts to configure your project.

Option 2: With Command-Line Options (Recommended)

Example with TypeScript, Tailwind CSS, App Router, Turbopack:

2. Install shadcn/ui

Initialize shadcn/ui in your project:

Add components individually or all at once:

Use the toggle option to select all components when prompted.

3. Add Framer Motion (Optional)

For smooth animations and transitions:

4. Theme Switching with next-themes

Install next-themes for theme management:

Create Theme Provider

Create components/theme-provider.tsx:

Wrap Your App

Update app/layout.tsx to include the ThemeProvider:

5. Setup MDX Support

MDX allows you to write JSX in your markdown files.

Install Dependencies

Configure next.config.ts

Update your next.config.ts:

Create components

Create components/mdx-image.tsx in your project:

Create components/mdx-syntax-highlighter.tsx in your project root:

Create mdx-components.tsx in your project root:

6. MDX Setup Options

Option A: Static MDX Pages

Create MDX files directly in your app directory:

Create app/blog/page.mdx:

Option B: Dynamic MDX with Slugs

For dynamic blog posts with slug-based routing:

Create app/blog/[slug]/page.tsx:

Create content/posts/first-post.mdx:

7. Run Your Project

Start the development server:

Your app will be available at http://localhost:3000

Summary

You now have a fully configured Next.js project with:

✅ TypeScript and Tailwind CSS
✅ shadcn/ui components
✅ Dark mode with next-themes
✅ Smooth animations with framer-motion
✅ MDX support for both static and dynamic content

Happy coding! 🚀