Guides · 20 pages
Guides & Tutorials
Step-by-step guides covering the technical work behind the services on this site — Next.js fundamentals, database and auth integration, payments, and AI features — with real code, common errors, and the reasoning behind each step.
These are written for developers implementing this themselves; if you'd rather have it built, the relevant service page links from each guide.
Getting Started
How to Build a Next.js Website
A practical walkthrough of setting up a Next.js project, structuring routes, and getting a real page live.
Read morearrow_forwardHow to Deploy Next.js on Vercel
Deploying a Next.js app to Vercel — from git push to a live custom domain, including environment variables.
Read morearrow_forwardHow to Deploy Next.js on cPanel
Running a Next.js app on cPanel hosting with Node.js support — build, upload, and process manager setup.
Read morearrow_forwardHow to Create Dynamic Routes in Next.js
Building dynamic routes with the App Router — folder conventions, generateStaticParams, and catch-all segments.
Read morearrow_forwardSEO & Metadata
How to Generate Metadata in Next.js
Using the Next.js Metadata API for per-page titles, descriptions, and Open Graph tags — static and dynamic.
Read morearrow_forwardHow to Create an XML Sitemap in Next.js
Generating sitemap.xml in Next.js using the built-in sitemap.ts file convention, including dynamic routes.
Read morearrow_forwardHow to Add JSON-LD in Next.js
Adding valid JSON-LD structured data to Next.js pages, as a reusable pattern instead of duplicated inline scripts.
Read morearrow_forwardHow to Improve SEO for a React Website
A practical checklist for improving search visibility on a React app, from rendering strategy down to per-page metadata.
Read morearrow_forwardPerformance
How to Improve Core Web Vitals in Next.js
Practical fixes for LCP, CLS, and INP in a Next.js app, using the framework's built-in optimization tools correctly.
Read morearrow_forwardHow to Optimize Next.js Images
Using next/image correctly for automatic resizing, format conversion, and lazy loading — including remote image sources.
Read morearrow_forwardData & Auth
How to Use Supabase Authentication With Next.js
Setting up Supabase authentication in a Next.js App Router project, with sessions working across server and client components.
Read morearrow_forwardHow to Connect Next.js to PostgreSQL
Connecting a Next.js app directly to PostgreSQL — connection pooling, querying from server components, and common pitfalls.
Read morearrow_forwardHow to Protect API Routes in Next.js
Securing Next.js API routes and Route Handlers — session validation, rate limiting, and input validation.
Read morearrow_forwardHow to Build a Next.js Admin Dashboard
Structuring an admin dashboard in Next.js — layout, protected routes, data tables, and role-based access.
Read morearrow_forwardIntegrations & Products
How to Add Google Maps to Next.js
Integrating an interactive Google Map into a Next.js app, loaded client-side with a properly restricted API key.
Read morearrow_forwardHow to Integrate Stripe With Next.js
Setting up Stripe Checkout in Next.js, including the webhook handler that keeps your database in sync with real payment events.
Read morearrow_forwardHow to Build a CRM With Next.js and Supabase
A walkthrough of the core building blocks for a custom CRM — schema, row-level security, and the pipeline view.
Read morearrow_forwardHow to Build a SaaS Application With Next.js
The foundational pieces of a SaaS product on Next.js — multi-tenancy, auth, and billing — before the product-specific features.
Read morearrow_forwardHow to Build an AI Chatbot for a Website
The core pieces of a website chatbot grounded in your own content — retrieval, prompt structure, and the chat interface.
Read morearrow_forwardHow to Integrate the OpenAI API With Next.js
Calling the OpenAI API from a Next.js Route Handler with streaming responses, error handling, and cost control.
Read morearrow_forwardMore
Explore Other Categories
NEED HELP WITH THIS?
I'm currently available for freelance and contract work. Get in touch to discuss your project, or check current availability.