Next.js Development

Next.js Case Studies

Qalbi Yoga Moving a marketing site to Headless WordPress + Next.js

• Next.js SSG
• Deployed on Netlify
• Netlify Forms
• WordPress Headless CMS
• Tailwind CSS
• Sentry Application Monitoring

If your content is managed through a CMS like WordPress, using Next.js to power your frontend is easy!

Next.js seamlessly integrates with popular CMS platforms, so you get all the advantages of Next.js without the need for a complex content migration.

By incorporating Next.js into your existing setup, you can harness the power of server-side rendering, static site generation, and enhanced performance and security on the frontend, while maintaining the familiar WordPress workflow for adding new content in the backend.

If you've decided you want to move away from using WordPress as a CMS there are plenty of alternatives like MDX, Dato CMS, & Contentful.

Video Generation Tool Automating server-side tasks with Next.js

• Next.js web application
• Next.js route handlers
• Reddit API
• Google TTS API
• Airtable API
• Playwright

Next.js is a full-stack React framework so it's perfect for building interactive user interfaces as well as handling the backend tasks of your web application.

This is a web app I built to automate the process of generating YouTube videos from Reddit posts. The user enters a Reddit post URL and the app handles the text-to-speech generation via Google TTS and screenshot generation via Playwright. It then creates the videos in the correct format ready to be uploaded to various social media platforms.

Performing these tasks manually is apparently very time-consuming! This web app automates the process, allowing users to generate multiple videos in a fraction of the time.

ARMA Connect Building a compliance dashboard with Next.js

• Next.js dashboard app
• Shadcn/ui & Radix UI components
• Supabase PostgreSQL DB
• TypeScript & Zod schema
• React Hook Form
• Deployed on Vercel

When dealing with larger datasets, it's great to be able to offload the initial fetching and processing onto the server, rather than doing it on the client's browser.

Once the initial data is loaded, the user can perform sorting, filtering, and pagination client-side. This keeps the page fast and scalable whilst retaining the dynamic nature of React.

Thanks to React Server Functions, you can use client components to securely execute mutations on the server and get the results back to the client in one go.