Merge pull request #114 from strapi/demo-use-experimental

Fix previews on demo infrastructure

Author: Baldinof

next/components/preview.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { API_URL } from '@/lib/utils';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 
@@ -10,7 +11,7 @@ export const Preview = () => {
     const handleMessage = async (message: MessageEvent<any>) => {
       const { origin, data } = message;
 
-      if (origin !== process.env.NEXT_PUBLIC_API_URL) {
+      if (origin !== API_URL) {
         return;
       }
 

next/components/ui/strapi-image.tsx

@@ -1,3 +1,4 @@
+import { API_URL } from '@/lib/utils';
 import { unstable_noStore as noStore } from 'next/cache';
 import Image from 'next/image';
 import { ComponentProps } from 'react';
@@ -9,17 +10,11 @@ interface StrapiImageProps
 }
 
 export function getStrapiMedia(url: string | null) {
-  const strapiURL = process.env.NEXT_PUBLIC_API_URL;
   if (url == null) return null;
   if (url.startsWith('data:')) return url;
   if (url.startsWith('http') || url.startsWith('//')) return url;
-  if (url.startsWith('/')) {
-    if (!strapiURL && document?.location.host.endsWith('.strapidemo.com')) {
-      return `https://${document.location.host.replace('client-', 'api-')}${url}`;
-    }
-    return strapiURL + url;
-  }
-  return `${strapiURL}${url}`;
+
+  return API_URL + url;
 }
 
 export function StrapiImage({

next/lib/strapi/client.ts

@@ -2,6 +2,7 @@ import { strapi } from '@strapi/client';
 import type { API, Config } from '@strapi/client';
 import { cacheLife, cacheTag, revalidateTag } from 'next/cache';
 import { draftMode } from 'next/headers';
+import { API_URL } from '../utils';
 
 export class StrapiError extends Error {
   constructor(
@@ -19,7 +20,7 @@ const createClient = (
   isDraftMode: boolean = false
 ) => {
   return strapi({
-    baseURL: `${process.env.NEXT_PUBLIC_API_URL ?? ''}/api`,
+    baseURL: `${API_URL}/api`,
     headers: {
       'strapi-encode-source-maps': isDraftMode ? 'true' : 'false',
       ...config?.headers,

next/lib/strapi/strapiImage.ts

@@ -1,16 +1,12 @@
 import { unstable_noStore as noStore } from 'next/cache';
+import { API_URL } from '../utils';
 
 export function strapiImage(url: string): string {
   noStore();
-  if (url.startsWith('/')) {
-    if (
-      !process.env.NEXT_PUBLIC_API_URL &&
-      document?.location.host.endsWith('.strapidemo.com')
-    ) {
-      return `https://${document.location.host.replace('client-', 'api-')}${url}`;
-    }
 
-    return process.env.NEXT_PUBLIC_API_URL + url;
+  if (url.startsWith('/')) {
+    return API_URL + url;
   }
+
   return url;
 }

next/lib/utils.ts

@@ -19,3 +19,6 @@ export const formatNumber = (
     maximumFractionDigits: 2,
   }).format(number);
 };
+
+export const API_URL = process.env.NEXT_PUBLIC_API_URL ||
+      (globalThis.document?.location.host.endsWith('.strapidemo.com') ? `https://${document.location.host.replace('client-', 'api-')}` : '');

next/next.config.mjs

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: process.env.NEXT_OUTPUT || undefined,
   // Enable Next.js 16 cache components
   cacheComponents: true,
   turbopack: {
@@ -28,6 +29,13 @@ const nextConfig = {
   },
   pageExtensions: ['ts', 'tsx'],
   async redirects() {
+    if (process.env.NEXT_PUBLIC_API_URL === undefined) {
+      console.warn(
+        '[next.config] NEXT_PUBLIC_API_URL is not defined. Skipping redirect generation.'
+      );
+      return [];
+    }
+
     let redirections = [];
     try {
       const res = await fetch(