refactor(strapi): read the Content API token server-side via a proxy

.env.local.sample

@@ -1,5 +1,6 @@
 NEXT_PUBLIC_CHATWOOT_API_KEY=obtain-from-engineering
 NEXT_PUBLIC_ONRAMPER_URL=https://buy.onramper.com/?apiKey=pk_prod_01HWMA66BYRB2271G08XDZVVCX&defaultCrypto=btc&wallets=btc%3A&onlyCryptos=btc&supportSell=false&isAddressEditable=false&language=en&defaultFiat=USD&themeName=dark&redirectURL=https%3A%2F%2Fapp.shapeshift.com%2F%23%2Fbuy-crypto&signature=cf9f78149db21574bbfe02dc72a1ab15ae15a0bd25d7b932ef0b453d8a922f30
-NEXT_PUBLIC_STRAPI_API_TOKEN=obtain-from-engineering
 NEXT_PUBLIC_STRAPI_URL=https://strapi.shapeshift.com
 NEXT_PUBLIC_WEGLOT_API_KEY=obtain-from-engineering
+
+STRAPI_API_TOKEN=obtain-from-engineering

app/[lang]/(core-products)/_components/ProductHero.tsx

@@ -20,7 +20,7 @@
 import Image from 'next/image'
 
 import { Button } from '@/app/[lang]/_components/Button'
-import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/getStrapiImageUrl'
 
 import type { TButton, TStrapiImage } from '@/app/[lang]/_components/strapi/types'
 import type { ReactNode } from 'react'

app/[lang]/(core-products)/_components/fetchUtils.ts

@@ -1,3 +1,7 @@
+import 'server-only'
+
+import { strapiServerFetch } from '@/app/[lang]/_utils/strapiServer'
+
 /************************************************************************************************
  * Generic fetch utility with consistent error handling
  *
@@ -12,14 +16,7 @@ export async function fetchWithErrorHandling<T>(
   error: string
 ): Promise<T | null> {
   try {
-    const response = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/${endpoint}?${queryParams}`, {
-      headers: {
-        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
-      },
-      next: {
-        revalidate: 3600, // Cache for 1 hour
-      },
-    })
+    const response = await strapiServerFetch(`${endpoint}?${queryParams}`, { revalidate: 3600 })
 
     if (!response.ok) {
       console.error(`Failed to fetch ${error}: Status ${response.status}`)

app/[lang]/(core-products)/defi-wallet/page.tsx

@@ -20,7 +20,7 @@ import Script from 'next/script'
 
 import { Card } from '@/app/[lang]/_components/strapi/cards-row/Card'
 import CardsRow from '@/app/[lang]/_components/strapi/cards-row/CardsRow'
-import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/getStrapiImageUrl'
 import { generateProductSchema } from '@/app/[lang]/_utils/schema'
 
 import { BackgroundImage } from '../_components/BackgroundImage'

app/[lang]/(core-products)/earn/page.tsx

@@ -19,7 +19,7 @@ import { notFound } from 'next/navigation'
 import Script from 'next/script'
 
 import Grid from '@/app/[lang]/_components/strapi/products/Grid'
-import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/getStrapiImageUrl'
 import { generateProductSchema } from '@/app/[lang]/_utils/schema'
 
 import { BackgroundImage } from '../_components/BackgroundImage'

app/[lang]/(core-products)/mobile-app/page.tsx

@@ -19,7 +19,7 @@ import { notFound } from 'next/navigation'
 import Script from 'next/script'
 
 import GridLadder from '@/app/[lang]/_components/strapi/products/GridLadder'
-import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/getStrapiImageUrl'
 import { generateProductSchema } from '@/app/[lang]/_utils/schema'
 
 import { BackgroundImage } from '../_components/BackgroundImage'

app/[lang]/(core-products)/trade/page.tsx

@@ -23,7 +23,7 @@ import Script from 'next/script'
 import { Card } from '@/app/[lang]/_components/strapi/cards-row/Card'
 import CardsRow from '@/app/[lang]/_components/strapi/cards-row/CardsRow'
 import GridDisplaced from '@/app/[lang]/_components/strapi/products/GridDisplaced'
-import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/getStrapiImageUrl'
 import { generateProductSchema } from '@/app/[lang]/_utils/schema'
 
 import { BackgroundImage } from '../_components/BackgroundImage'

app/[lang]/(resources)/_components/DiscoverFeature.tsx

@@ -21,7 +21,7 @@ import Image from 'next/image'
 
 import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
 import { cl } from '@/app/[lang]/_utils/cl'
-import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/getStrapiImageUrl'
 
 import type { ReactNode } from 'react'
 

app/[lang]/(resources)/_components/ResourceCard.tsx

@@ -23,7 +23,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 
 import { cl } from '@/app/[lang]/_utils/cl'
-import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/getStrapiImageUrl'
 
 import type { ReactNode } from 'react'
 

app/[lang]/(resources)/_utils/fetchUtils.ts

@@ -15,6 +15,10 @@
  ** - Handle null returns with appropriate UI (usually notFound)
  ************************************************************************************************/
 
+import 'server-only'
+
+import { strapiServerFetch } from '@/app/[lang]/_utils/strapiServer'
+
 import type {
   TDiscoverData,
   TFaqData,
@@ -23,26 +27,16 @@ import type {
   TSupportedWalletData,
 } from '@/app/[lang]/_components/strapi/types'
 
-// Common headers and cache configuration
-const apiConfig = {
-  headers: {
-    Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
-  },
-  next: {
-    revalidate: 3600, // Cache for 1 hour
-  },
-}
-
 /************************************************************************************************
  * Fetch all Protocols
  *
  * @returns Promise resolving to array of protocol data or null if error
  ************************************************************************************************/
 export async function fetchAllProtocols(): Promise<TSupportedProtocolData[] | null> {
   try {
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-protocols?populate=*&pagination[page]=1&pagination[pageSize]=500`,
-      apiConfig
+    const response = await strapiServerFetch(
+      `supported-protocols?populate=*&pagination[page]=1&pagination[pageSize]=500`,
+      { revalidate: 3600 }
     )
 
     if (!response.ok) {
@@ -65,9 +59,9 @@ export async function fetchAllProtocols(): Promise<TSupportedProtocolData[] | nu
  ************************************************************************************************/
 export async function fetchAllChains(): Promise<TSupportedChainData[] | null> {
   try {
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-chains?populate=*&pagination[page]=1&pagination[pageSize]=500`,
-      apiConfig
+    const response = await strapiServerFetch(
+      `supported-chains?populate=*&pagination[page]=1&pagination[pageSize]=500`,
+      { revalidate: 3600 }
     )
 
     if (!response.ok) {
@@ -90,9 +84,9 @@ export async function fetchAllChains(): Promise<TSupportedChainData[] | null> {
  ************************************************************************************************/
 export async function fetchAllWallets(): Promise<TSupportedWalletData[] | null> {
   try {
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-wallets?populate=*&pagination[page]=1&pagination[pageSize]=500`,
-      apiConfig
+    const response = await strapiServerFetch(
+      `supported-wallets?populate=*&pagination[page]=1&pagination[pageSize]=500`,
+      { revalidate: 3600 }
     )
 
     if (!response.ok) {
@@ -116,9 +110,9 @@ export async function fetchAllWallets(): Promise<TSupportedWalletData[] | null>
  ************************************************************************************************/
 export async function fetchDiscoverBySlug(slug: string): Promise<TDiscoverData | null> {
   try {
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/discovers?filters[slug][$eq]=${slug}&populate[0]=features&fields[1]=title&fields[2]=description&populate[3]=featuredImg&populate[4]=features.image&fields[5]=tag&populate[6]=features.buttonCta&pagination[page]=1&pagination[pageSize]=500`,
-      apiConfig
+    const response = await strapiServerFetch(
+      `discovers?filters[slug][$eq]=${encodeURIComponent(slug)}&populate[0]=features&fields[1]=title&fields[2]=description&populate[3]=featuredImg&populate[4]=features.image&fields[5]=tag&populate[6]=features.buttonCta&pagination[page]=1&pagination[pageSize]=500`,
+      { revalidate: 3600 }
     )
 
     if (!response.ok) {
@@ -144,9 +138,9 @@ export async function fetchDiscoverBySlug(slug: string): Promise<TDiscoverData |
  ************************************************************************************************/
 export async function fetchFaqData(): Promise<TFaqData | null> {
   try {
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/faq?populate[faqSection][populate][faqSectionItem][populate]=*&pagination[page]=1&pagination[pageSize]=500`,
-      apiConfig
+    const response = await strapiServerFetch(
+      `faq?populate[faqSection][populate][faqSectionItem][populate]=*&pagination[page]=1&pagination[pageSize]=500`,
+      { revalidate: 3600 }
     )
 
     if (!response.ok) {
@@ -161,3 +155,86 @@ export async function fetchFaqData(): Promise<TFaqData | null> {
     return null
   }
 }
+
+/************************************************************************************************
+ * Fetch a single Protocol by slug
+ *
+ * @param slug - Unique identifier for the protocol
+ * @returns Promise resolving to protocol data or null if not found
+ ************************************************************************************************/
+export async function fetchSupportedProtocol(slug: string): Promise<TSupportedProtocolData | null> {
+  try {
+    const res = await strapiServerFetch(`supported-protocols?filters[slug][$eq]=${encodeURIComponent(slug)}&populate=*`)
+
+    if (!res.ok) {
+      return null
+    }
+    const data = await res.json()
+    return data.data[0] ?? null
+  } catch (error) {
+    console.error('Error fetching protocol data:', error instanceof Error ? error.message : String(error))
+    return null
+  }
+}
+
+/************************************************************************************************
+ * Fetch a single Chain by slug
+ *
+ * @param slug - Unique identifier for the chain
+ * @returns Promise resolving to chain data or null if not found
+ ************************************************************************************************/
+export async function fetchSupportedChain(slug: string): Promise<TSupportedChainData | null> {
+  try {
+    const res = await strapiServerFetch(`supported-chains?filters[slug][$eq]=${encodeURIComponent(slug)}&populate=*`)
+
+    if (!res.ok) {
+      return null
+    }
+    const data = await res.json()
+    return data.data[0] ?? null
+  } catch (error) {
+    console.error('Error fetching chain data:', error instanceof Error ? error.message : String(error))
+    return null
+  }
+}
+
+/************************************************************************************************
+ * Fetch a single Wallet by slug
+ *
+ * @param slug - Unique identifier for the wallet
+ * @returns Promise resolving to wallet data or null if not found
+ ************************************************************************************************/
+export async function fetchSupportedWallet(slug: string): Promise<TSupportedWalletData | null> {
+  try {
+    const res = await strapiServerFetch(`supported-wallets?filters[slug][$eq]=${encodeURIComponent(slug)}&populate=*`)
+
+    if (!res.ok) {
+      return null
+    }
+    const data = await res.json()
+    return data.data[0] ?? null
+  } catch (error) {
+    console.error('Error fetching wallet data:', error instanceof Error ? error.message : String(error))
+    return null
+  }
+}
+
+/************************************************************************************************
+ * Fetch all Discover entries
+ *
+ * @returns Promise resolving to array of discover data or null if error
+ ************************************************************************************************/
+export async function fetchDiscovers(): Promise<TDiscoverData[] | null> {
+  try {
+    const res = await strapiServerFetch(`discovers?populate=*`)
+
+    if (!res.ok) {
+      return null
+    }
+    const data = await res.json()
+    return data.data
+  } catch (error) {
+    console.error('Error fetching discover data:', error instanceof Error ? error.message : String(error))
+    return null
+  }
+}

app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/page.tsx

@@ -1,19 +1,15 @@
 import { notFound } from 'next/navigation'
 
 import { ListOfPosts } from '@/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts'
+import { strapiServerFetch } from '@/app/[lang]/_utils/strapiServer'
 
 export default async function BlogCategoriesPage(props: {
   params: Promise<{ category: string }>
 }): Promise<React.ReactNode> {
   const { category } = await props.params
 
-  const data = await fetch(
-    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[type][$contains]=${category}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc&pagination[pageSize]=1`,
-    {
-      headers: {
-        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
-      },
-    }
+  const data = await strapiServerFetch(
+    `posts?filters[type][$contains]=${encodeURIComponent(category)}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc&pagination[pageSize]=1`
   )
 
   const { data: posts } = await data.json()

app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/page.tsx

@@ -1,16 +1,12 @@
 import { notFound } from 'next/navigation'
 
 import { ListOfPosts } from '@/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/ListOfPosts'
+import { strapiServerFetch } from '@/app/[lang]/_utils/strapiServer'
 
 export default async function BlogTagsPage(props: { params: Promise<{ tag: string }> }): Promise<React.ReactNode> {
   const { tag } = await props.params
-  const data = await fetch(
-    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[tags][$contains]=${tag}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc`,
-    {
-      headers: {
-        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
-      },
-    }
+  const data = await strapiServerFetch(
+    `posts?filters[tags][$contains]=${encodeURIComponent(tag)}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc`
   )
   const { data: posts } = await data.json()
 

app/[lang]/(resources)/blog/[slug]/layout.tsx

@@ -1,6 +1,7 @@
 import { notFound } from 'next/navigation'
 
-import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/getStrapiImageUrl'
+import { strapiServerFetch } from '@/app/[lang]/_utils/strapiServer'
 
 import type { Metadata } from 'next'
 
@@ -11,13 +12,8 @@ import type { Metadata } from 'next'
  ************************************************************************************************/
 export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
   const { slug } = await params
-  const data = await fetch(
-    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[slug][$eq]=${slug}&fields[0]=summary&fields[2]=tags&fields[3]=title&fields[4]=publishedAt&populate[0]=featuredImg`,
-    {
-      headers: {
-        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
-      },
-    }
+  const data = await strapiServerFetch(
+    `posts?filters[slug][$eq]=${encodeURIComponent(slug)}&fields[0]=summary&fields[2]=tags&fields[3]=title&fields[4]=publishedAt&populate[0]=featuredImg`
   ).then(async (res) => res.json())
 
   const post = data.data[0]

app/[lang]/(resources)/chains/[slug]/page.tsx

@@ -1,13 +1,15 @@
 import Image from 'next/image'
 import { notFound } from 'next/navigation'
 
+import { fetchSupportedChain } from '@/app/[lang]/(resources)/_utils/fetchUtils'
 import { Banner } from '@/app/[lang]/_components/Banner'
 import { ChainActions } from '@/app/[lang]/_components/strapi/templates/ChainActions'
 import { ChainDescription } from '@/app/[lang]/_components/strapi/templates/ChainDescription'
 import { ChainFeatures } from '@/app/[lang]/_components/strapi/templates/ChainFeatures'
 import { ChainHeader } from '@/app/[lang]/_components/strapi/templates/ChainHeader'
 import { ChainHero } from '@/app/[lang]/_components/strapi/templates/ChainHero'
-import { getStrapiImageUrl, getSupportedChain } from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/getStrapiImageUrl'
+import { strapiServerFetch } from '@/app/[lang]/_utils/strapiServer'
 
 import type { TSupportedChainData } from '@/app/[lang]/_components/strapi/types'
 import type { Metadata } from 'next'
@@ -19,14 +21,7 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
     return notFound()
   }
 
-  const response = await fetch(
-    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-chains?filters[slug][$eq]=${slug}&populate=*`,
-    {
-      headers: {
-        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
-      },
-    }
-  )
+  const response = await strapiServerFetch(`supported-chains?filters[slug][$eq]=${encodeURIComponent(slug)}&populate=*`)
   const data = await response.json()
   const chain = data.data[0] as TSupportedChainData
   if (!chain) {
@@ -68,7 +63,7 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
 
 export default async function ChainPage({ params }: { params: Promise<{ slug: string }> }): Promise<ReactNode> {
   const { slug } = await params
-  const chain = await getSupportedChain(slug)
+  const chain = await fetchSupportedChain(slug)
 
   if (!chain) {
     return notFound()

app/[lang]/(resources)/discover/[slug]/page.tsx

@@ -24,7 +24,7 @@ import { ResourceHero } from '@/app/[lang]/(resources)/_components/ResourceHero'
 import { DEFAULT_FEATURES } from '@/app/[lang]/(resources)/_utils/constants'
 import { fetchDiscoverBySlug } from '@/app/[lang]/(resources)/_utils/fetchUtils'
 import { Banner } from '@/app/[lang]/_components/Banner'
-import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/getStrapiImageUrl'
 
 import type { Metadata } from 'next'
 import type { ReactNode } from 'react'