Skip to content

summary.en.md

Latest commit

 

History

History
102 lines (81 loc) · 10.5 KB

summary.en.md

File metadata and controls

102 lines (81 loc) · 10.5 KB

How to Build a Headless WordPress Blog with Next.js and GraphQL

Disclaimer: This is a personal summary and interpretation based on a YouTube video. It is not official material and not endorsed by the original creator. All rights remain with the respective creators.

This document summarizes the key takeaways from the video. I highly recommend watching the full video for visual context and coding demonstrations.

Before You Get Started

  • I summarize key points to help you learn and review quickly.
  • Simply click on Ask AI links to dive into any topic you want.

AI-Powered buttons

Teach Me: 5 Years Old | Beginner | Intermediate | Advanced | (reset auto redirect)

Learn Differently: Analogy | Storytelling | Cheatsheet | Mindmap | Flashcards | Practical Projects | Code Examples | Common Mistakes

Check Understanding: Generate Quiz | Interview Me | Refactor Challenge | Assessment Rubric | Next Steps

Project Overview and Initial Setup

Next.js 15 is used to build a blog frontend with WordPress as the headless CMS via GraphQL. The layout includes a header, footer, hero section, social icons, categories, search, latest posts with pagination, and individual post pages styled with Tailwind CSS.

  • Key Takeaway/Example: Run npx create-next-app@latest to initialize the project with TypeScript, ESLint, Tailwind CSS, and App Router enabled. Configure global CSS for background image and fonts from Google Fonts.
  • Link for More Details: Ask AI: Next.js Project Setup

Building the Layout and Static Pages

The root layout wraps all pages with a consistent structure using HTML5 elements. Create header and footer components for navigation and copyright info. Add static pages like About and Contact by creating folders with page.tsx files.

  • Key Takeaway/Example: In layout.tsx, wrap children in a div with max-w-[780px] px-4 md:px-10 mx-auto bg-background min-h-screen. For header, use flex for logo and nav links.
  • Link for More Details: Ask AI: Next.js Layout and Pages

Homepage Components: Hero and Social Icons

Build a hero section with text, bio, and optimized image using Next.js Image. Add social icons by mapping an array of links and SVGs for platforms like X, GitHub, and YouTube.

  • Key Takeaway/Example: In Hero.tsx, use <Image src="/hero.webp" width={700} height={1192} quality={70} loading="eager" />. For social icons, map an array: { name: 'X', url: 'https://x.com/raddydev', image: '/x.svg', alt: 'Follow on X' }.
  • Link for More Details: Ask AI: Next.js Components Hero Social

Setting Up WordPress with GraphQL

Use Cloudways to host a WordPress site. Install WPGraphQL plugin, enable debug mode, and import demo content. Test queries in GraphiQL IDE for categories and posts.

  • Key Takeaway/Example: After activating WPGraphQL, access endpoint at /graphql. Query example: query GetCategories { categories(first: 100) { nodes { id name slug } } }.
  • Link for More Details: Ask AI: WordPress GraphQL Setup

Querying and Displaying Categories

Set up environment variables for WordPress URL. Use graphql-request to fetch categories and display them as clickable links filtering posts.

  • Key Takeaway/Example: In queries.ts, define getCategories with GraphQL client. In component: categories.map(cat => <Link href={/blog?category=${cat.slug}}>{cat.name}</Link>).
  • Link for More Details: Ask AI: GraphQL Categories Query

Implementing Search Functionality

Create a search bar component that submits to /blog?search=term using Next.js router. Handle form submission to prevent default and push URL params.

  • Key Takeaway/Example: In SearchBar.tsx: function handleSearch(event: React.FormEvent<HTMLFormElement>) { const searchInput = event.currentTarget.elements.namedItem('search') as HTMLInputElement; router.push(/blog?search=${searchInput.value}); }.
  • Link for More Details: Ask AI: Next.js Search Bar

Fetching and Displaying Latest Posts with Pagination

Query posts with filters for search, category, and cursors for pagination. Display posts in a list with title, date, and excerpt. Add next/previous links using page info.

  • Key Takeaway/Example: In getAllPosts, build dynamic where clause: posts(first: $perPage, where: $whereCondition) { nodes { id title excerpt date slug categories { nodes { name slug } } } pageInfo { startCursor endCursor hasNextPage hasPreviousPage } }. Use cursors for pagination links.
  • Link for More Details: Ask AI: GraphQL Posts Pagination

Creating Individual Post Pages

Use dynamic routes [slug] to fetch single post by slug. Render title, date, author, content with custom styles. Handle not found cases.

  • Key Takeaway/Example: In [slug]/page.tsx: const post = await getPostBySlug(params.slug); Render content: <div className="article" dangerouslySetInnerHTML={{ __html: post?.content ?? '' }} />. Style in global.css: .article p { margin-bottom: 20px; }.
  • Link for More Details: Ask AI: Next.js Dynamic Routes Posts

Adding Dynamic Metadata for SEO

Export generateMetadata function to set title, description, and open graph images based on post data.

  • Key Takeaway/Example: export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> { const post = await getPostBySlug((await params).slug); return { title: post?.title, openGraph: { images: '/opengraph.jpg' } }; }.
  • Link for More Details: Ask AI: Next.js Metadata SEO

Building, Testing, and Fixes

Build the project with npm run build and run with npm start. Fix common errors like undefined types, escaping quotes, and unused variables. Test performance with Lighthouse.

  • Key Takeaway/Example: Address build errors by typing variables in queries and escaping strings in JSX. Achieves 100% scores in Lighthouse for performance and SEO.
  • Link for More Details: Ask AI: Next.js Build Testing

About the summarizer

I'm Ali Sol, a Backend Developer. Learn more: