# Next.js WordPress Blog - Home Page Documentation ## Overview This document provides comprehensive documentation for the main home page component (`src/app/page.tsx`) of a Next.js WordPress blog application. The home page serves as the entry point that displays a grid of blog posts fetched from a WordPress REST API. ## Component Details ### Home Component (`src/app/page.tsx`) **Purpose**: Renders the main blog homepage with a header and grid of posts. **Key Features**: - **Server-Side Rendering**: Async component that fetches data at build/request time - **ISR (Incremental Static Regeneration)**: Revalidates every 20 minutes (1200 seconds) - **WordPress Integration**: Fetches posts from WordPress REST API using `_embed` parameter - **Type Safety**: Uses TypeScript with custom `WordPressPost` type ## Component Structure ```jsx export default async function Home() { const res = await fetch(`${process.env.WP_API_URL}/posts?_embed`); const posts: WordPressPost[] = await res.json(); return ( ); } ``` ## Dependencies **Components**: - `BlogHeader` - Header component for the blog (`@/components/blog-header`) - `BlogPostGrid` - Grid layout component for displaying posts (`@/components/blog-post-grid`) **Types**: - `WordPressPost` - Type definition for WordPress post structure (`@/lib/types`) ## Data Fetching The component fetches WordPress posts using the WordPress REST API: ```javascript const res = await fetch(`${process.env.WP_API_URL}/posts?_embed`); ``` **Environment Variables Required**: - `WP_API_URL` - WordPress REST API base URL (e.g., `https://yoursite.com/wp-json/wp/v2`) **API Parameters**: - `_embed` - Includes embedded resources such as: - Featured images - Author data - Category information - Custom fields ## Performance Optimizations ### Incremental Static Regeneration (ISR) ```javascript export const revalidate = 1200; // 20 minutes ``` **Benefits**: - **Static Performance**: Pages are pre-generated for fast loading - **Fresh Content**: Content updates every 20 minutes without rebuilding - **Reduced API Load**: Minimizes WordPress server requests ### Server Components - Reduces client-side JavaScript bundle - Improves initial page load times - Better SEO with server-rendered content ### Single API Call - Uses `_embed` parameter to fetch all necessary data in one request - Reduces client-server round trips ## =�� Technology Stack - **Frontend Framework**: Next.js 14 with App Router - **Language**: TypeScript - **Styling**: Tailwind CSS - **Content Management**: WordPress (Headless CMS) - **Icons**: Lucide React - **Image Optimization**: Next.js Image component ## =� Prerequisites Before you begin, ensure you have the following installed: - **Node.js** (version 18 or higher) - **npm** or **yarn** package manager - **WordPress site** with REST API enabled (or use the demo API provided) ## =� Getting Started ### 1. Clone the Repository ```bash git clone https://github.com/your-username/nextjs-wordpress-blog.git cd nextjs-wordpress-blog ``` ### 2. Install Dependencies ```bash npm install # or yarn install ``` ### 3. Environment Configuration Create a `.env.local` file in the root directory and add your WordPress API URL: ```env WP_API_URL=https://your-wordpress-site.com/wp-json/wp/v2 ``` **Note**: The project currently uses a demo WordPress API. Replace it with your own WordPress site URL. ### 4. Configure WordPress (If using your own) Ensure your WordPress site has: - REST API enabled (enabled by default in WordPress 4.7+) - CORS configured if running on different domains - Featured images enabled for posts ### 5. Update Image Domains If using your own WordPress site, update the `next.config.mjs` file to include your domain: ```javascript const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "your-wordpress-site.com", // Add your domain here }, { protocol: "https", hostname: "via.placeholder.com", }, ], }, }; ``` ### 6. Run the Development Server ```bash npm run dev # or yarn dev ``` Open [http://localhost:3000](http://localhost:3000) in your browser to see the application. ## =� Project Structure ``` � src/ � � app/ � � � globals.css # Global styles � � � layout.tsx # Root layout component � � � page.tsx # Home page (blog list) � � � posts/ � � � [slug]/ � � � page.tsx # Individual post page � � components/ � � � header.tsx # Navigation header � � � footer.tsx # Site footer � � lib/ � � fonts.ts # Font configurations � public/ # Static assets � .env.local # Environment variables � next.config.mjs # Next.js configuration � tailwind.config.ts # Tailwind CSS configuration � package.json # Dependencies and scripts ``` ## <�� How This Project Was Built ### 1. Initial Setup ```bash npx create-next-app@latest nextjs-wordpress-blog --typescript --tailwind --eslint --app ``` ### 2. Dependencies Added - **lucide-react**: For modern, customizable icons - **Tailwind CSS**: For rapid UI development with utility classes ### 3. WordPress Integration - Connected to WordPress REST API using native `fetch` - Implemented data fetching for posts list and individual posts - Added support for featured images and post metadata ### 4. UI Components - Created responsive header with navigation - Designed blog post cards with hover effects - Implemented individual post pages with content rendering ### 5. Configuration - Set up Next.js Image optimization for remote WordPress images - Configured TypeScript for type safety - Added revalidation for content updates ## =� Available Scripts - `npm run dev`: Start development server - `npm run build`: Build production application - `npm run start`: Start production server - `npm run lint`: Run ESLint for code quality ## <� Customization ### Styling - Modify `src/app/globals.css` for global styles - Update `tailwind.config.ts` for custom Tailwind configuration - Customize components in `src/components/` directory ### Content - Update site metadata in `src/app/layout.tsx` - Modify blog post layout in `src/app/page.tsx` - Customize individual post display in `src/app/posts/[slug]/page.tsx` ## =' Configuration Files ### Environment Variables ```env WP_API_URL=https://your-wordpress-site.com/wp-json/wp/v2 ``` ### Next.js Configuration The `next.config.mjs` file includes: - Image optimization settings - Remote pattern configurations for WordPress images ## =� Responsive Design The application is fully responsive with: - Mobile-first design approach - Responsive grid layouts (1 column on mobile, 2 on tablet, 3 on desktop) - Optimized typography and spacing for all screen sizes - Touch-friendly hover effects ## =� Deployment ### Vercel (Recommended) 1. Push your code to GitHub 2. Connect your repository to Vercel 3. Add environment variables in Vercel dashboard 4. Deploy automatically on every push ### Other Platforms The application can be deployed to any platform that supports Node.js: - Netlify - Railway - DigitalOcean App Platform - AWS Amplify ## =�� Troubleshooting ### Common Issues 1. **Images not loading**: Check if your WordPress domain is added to `next.config.mjs` 2. **API errors**: Verify your `WP_API_URL` environment variable 3. **CORS issues**: Configure CORS on your WordPress site for cross-domain requests ### Development Tips - Use browser developer tools to inspect API responses - Check Next.js console for build-time errors - Ensure WordPress REST API is accessible and returns expected data structure ## =� License This project is open source and available under the [MIT License](LICENSE). ## >� Contributing Contributions are welcome! Please feel free to submit a Pull Request. ## =� Support If you have any questions or need help with setup, please open an issue in this repository. --- **Happy Blogging!** <�