thijmen.dev

Building My Personal Site: A Developer's Journey with NextJS, TypeScript, and PayloadCMS

As a lead developer, I'm always looking for the right stack to bring my projects to life. For my personal site, I wanted a modern, performant solution that would give me full control while remaining maintainable. Here's how I built my site using NextJS, TypeScript, and PayloadCMS, all hosted on a Hetzner VPS.

Why This Stack?

My tech choices were deliberate. NextJS provides an exceptional React framework with built-in routing, image optimization, and server-side rendering. TypeScript adds type safety that catches errors before they happen and improves code maintainability. PayloadCMS gives me a flexible, developer-friendly content management system that doesn't dictate how I structure my frontend.

Development Process

The development journey started with setting up a NextJS project with TypeScript support. I appreciated how seamlessly these technologies work together, allowing me to create a type-safe application with excellent developer experience.

// Example of a typed component in my site
interface ProjectCardProps {
  title: string;
  description: string;
  technologies: string[];
  imageUrl?: string;
  githubUrl?: string;
  liveUrl?: string;
}

const ProjectCard: React.FC<ProjectCardProps> = ({
  title,
  description,
  technologies,
  imageUrl,
  githubUrl,
  liveUrl
}) => {
  // Component implementation
};

Integrating PayloadCMS was straightforward. Its GraphQL API made fetching content for my pages simple and efficient:

// Fetching blog posts from PayloadCMS
export async function getStaticProps() {
  const posts = await payload.find({
    collection: 'posts',
    limit: 10,
  });
  
  return {
    props: {
      posts: posts.docs,
    },
    revalidate: 60,
  };
}

Deployment Strategy

For hosting, I chose a Hetzner VPS for its balance of performance, control, and cost-effectiveness. My deployment setup includes:

• Nginx as a reverse proxy
• PM2 for process management
• GitHub Actions for CI/CD pipeline
• Let's Encrypt for SSL

This configuration gives me complete control over my hosting environment while maintaining reasonable costs.

Lessons Learned

This project reinforced several key principles in modern web development:

1. Type safety pays dividends in maintainability
2. A headless CMS provides flexibility without sacrificing content management
3. Server-side rendering improves both SEO and performance
4. Self-hosting requires more setup but offers greater control

What's Next

Moving forward, I plan to expand my site with new features including an improved portfolio section, integration with my GitHub repositories, and performance optimizations to achieve perfect Lighthouse scores.