Part 92: Tackling Image URL Issues in a Next.js and Strapi Integration

[App] Deploying with External Services

[App] Deploying with External Services

Integrating a Next.js app with a remote Strapi CMS can be a rewarding experience, offering the benefits of a centralized content management system. However, as with any integration, there are challenges, particularly when it comes to handling image URLs. Let's explore how to address these issues when transitioning from a local to a remote Strapi instance.

Understanding the Issue

When running Strapi locally, image URLs are typically relative paths. Your Next.js application might be set up to prepend a base URL (e.g., CMS_URL) to these paths to form complete URLs. However, when using a remote instance like Strapi Cloud, image URLs are often absolute, pointing to a different domain for media assets.

This discrepancy can lead to errors in your app, as your existing code may incorrectly prepend the base URL to already complete URLs.

A Simple Solution with the URL Object

To accommodate both local and remote setups, we can use JavaScript's URL object. This allows us to determine whether an image URL is relative or absolute and handle each case appropriately.

Code Adjustment

Here's how you can modify your code to handle both types of URLs:

function toReview(item) {
  const attributes = item.attributes;
  return {
    title: attributes.title,
    subtitle: attributes.subtitle,
    date: attributes.publishedAt.slice(0, 'yyyy-mm-dd'.length),
    image: new URL(attributes.image.data.attributes.url, CMS_URL).href,
  };
}

Explanation

• URL Constructor: The URL constructor takes two arguments: the URL path and an optional base URL. If the path is relative, it appends it to the base URL. If it's absolute, the base URL is ignored.

• Dynamic Handling: This setup allows your app to dynamically handle both local relative paths and remote absolute URLs, ensuring compatibility across environments.

Configuring Image Patterns in Next.js

After updating your code, you'll need to ensure that your Next.js configuration supports the correct domains for image loading.

Update next.config.js

In your next.config.js, you can specify the domains from which images can be optimized:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'media.strapiapp.com',
        pathname: '/uploads/**',
      },
    ],
  },
};

This configuration allows Next.js to load images from the specified domain, which is necessary for Strapi Cloud or any similar setup that uses a separate media domain.

Testing Your Configuration

With the code and configuration changes in place, restart your development server and reload your application. Verify that images load correctly both locally and from the remote CMS.

Deploying to Production

Once everything works locally, it's time to deploy your Next.js app. Platforms like Vercel offer seamless deployment from a Git repository and allow you to set environment variables for different environments.

Setting Environment Variables in Vercel

In Vercel, define your environment variables through their UI:

1. CMS_URL: The public URL of your Strapi instance.

2. CMS_IMAGE_PATTERN: The domain used for image assets, e.g., media.strapiapp.com.

These variables are used during the build process and runtime, ensuring your app functions correctly in production.

Conclusion

Handling image URLs in a Next.js and Strapi integration requires careful consideration of how URLs are structured across different environments. By leveraging the URL object and updating your Next.js configuration, you can ensure a smooth transition from local to remote CMS setups.

Deploying your app to a platform like Vercel simplifies production deployment, and setting environment variables allows for flexibility in managing different environments. Whether you're using Strapi or another CMS, these principles remain applicable, helping you build robust and adaptable applications.