Next.js Blog & YouTube Portfolio

Instructions for building a Next.js portfolio application featuring blog posts, YouTube video showcase, and admin content management.

Project Overview

This skill guides you in creating a TypeScript-based Next.js application with:

Architecture Guidelines

TypeScript & Type Safety

- Blog post structures

- YouTube video metadata

- API request/response payloads

- Component props

Component Structure

Styling Approach

File Organization

```

/src/app - App Router pages, layouts, and route handlers

/src/components - Reusable React components

/src/styles - CSS modules and global styles

/src/lib - Utility functions, configurations, helpers

/src/types - TypeScript type definitions and interfaces

/src/data - Static data, mock data, content files

```

Implementation Steps

1. Set Up Project Structure

2. Define Type Definitions

Create interfaces in `/src/types` for:

3. Build Frontend Components

**Blog Components:**

**YouTube Components:**

**Layout Components:**

4. Implement API Routes

Create API routes in `/src/app/api`:

**Error Handling:**

5. Build Admin Interface

Create admin pages in `/src/app/admin`:

**Security Considerations:**

6. Optimize Performance & SEO

Best Practices

Code Quality

Data Management

Accessibility

Environment Variables

Store in `.env.local`:

Example Usage

When creating a new blog post component:

```typescript

// src/types/blog.ts

export interface BlogPost {

slug: string;

title: string;

excerpt: string;

content: string;

author: string;

publishedAt: string;

tags: string[];

featuredImage: string;

}

// src/components/BlogCard.tsx

interface BlogCardProps {

post: BlogPost;

}

export function BlogCard({ post }: BlogCardProps) {

// Component implementation using TailwindCSS

// Use Next.js Image and Link components

}

```

When creating an API route:

```typescript

// src/app/api/blogs/route.ts

import { NextResponse } from 'next/server';

import type { BlogPost } from '@/types/blog';

export async function GET() {

try {

// Fetch blog posts from data source

const posts: BlogPost[] = await fetchPosts();

return NextResponse.json(posts);

} catch (error) {

console.error('Error fetching posts:', error);

return NextResponse.json(

{ error: 'Failed to fetch posts' },

{ status: 500 }

);

}

}

```

Testing

Deployment Considerations