Getting Started with WordPress to Next.js Migration

This is a sample blog post demonstrating the features of the WordPress to Next.js migration template. You can use this as a reference when creating your own content.

What You'll Learn

In this post, we'll cover:

1. Setting up the migration environment
2. Configuring your WordPress API credentials
3. Running the migration script
4. Customizing your new Next.js site

Prerequisites

Before you begin, make sure you have:

• Node.js 18+ installed
• Access to your WordPress admin panel
• WordPress API credentials (Application Password)

Step 1: Install Dependencies

First, install the required dependencies:

npm install

Step 2: Configure Environment Variables

Create a .env.local file in the root of your project:

SITE_URL=https://your-site.com
SITE_NAME=Your Site Name
SITE_DESCRIPTION=Your site description
WORDPRESS_URL=https://your-wordpress-site.com
WORDPRESS_USERNAME=your_username
WORDPRESS_PASSWORD=your_application_password

Step 3: Run the Migration

Execute the migration script:

npm run migrate

The script will:

• Fetch all posts and pages from WordPress
• Convert HTML to Markdown
• Download images locally
• Convert internal links to relative paths

Code Examples

Here's an example of a code block with syntax highlighting:

// Example: Fetching posts from WordPress API
const response = await fetch('https://your-site.com/wp-json/wp/v2/posts');
const posts = await response.json();
console.log(`Found ${posts.length} posts`);

Internal Links

You can link to other posts using relative paths, like this: Sample Post 2.

Images

Images are automatically downloaded during migration and stored in the public/images/ directory. You can reference them like this:

Conclusion

This template makes it easy to migrate your WordPress site to Next.js. The migration script handles most of the heavy lifting, so you can focus on customizing your new site.

For more advanced topics, check out our advanced migration guide.