feat: add Vercel telemetry and wrap Payload layout in Suspense

- add @vercel/analytics and @vercel/speed-insights dependencies
- integrate Analytics and SpeedInsights into frontend root layout
- wrap (payload) RootLayout with Suspense to improve admin rendering compatibility
- apply minor formatting cleanup in revalidateGlobal
- update lockfile for dependency changes
This commit is contained in:
Francisco Ignácio Fontoura Solla 2026-02-23 00:21:33 -03:00
parent dac78163c3
commit d8794c6e13
5 changed files with 79 additions and 5 deletions

View file

@ -45,6 +45,8 @@
"@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slot": "^1.2.4",
"@vercel/analytics": "^1.6.1",
"@vercel/speed-insights": "^1.3.1",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cross-env": "^7.0.3",

View file

@ -38,6 +38,12 @@ importers:
'@radix-ui/react-slot':
specifier: ^1.2.4
version: 1.2.4(@types/react@19.2.14)(react@19.2.4)
'@vercel/analytics':
specifier: ^1.6.1
version: 1.6.1(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4))(react@19.2.4)
'@vercel/speed-insights':
specifier: ^1.3.1
version: 1.3.1(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4))(react@19.2.4)
class-variance-authority:
specifier: ^0.7.1
version: 0.7.1
@ -2274,6 +2280,55 @@ packages:
cpu: [x64]
os: [win32]
'@vercel/analytics@1.6.1':
resolution: {integrity: sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg==}
peerDependencies:
'@remix-run/react': ^2
'@sveltejs/kit': ^1 || ^2
next: '>= 13'
react: ^18 || ^19 || ^19.0.0-rc
svelte: '>= 4'
vue: ^3
vue-router: ^4
peerDependenciesMeta:
'@remix-run/react':
optional: true
'@sveltejs/kit':
optional: true
next:
optional: true
react:
optional: true
svelte:
optional: true
vue:
optional: true
vue-router:
optional: true
'@vercel/speed-insights@1.3.1':
resolution: {integrity: sha512-PbEr7FrMkUrGYvlcLHGkXdCkxnylCWePx7lPxxq36DNdfo9mcUjLOmqOyPDHAOgnfqgGGdmE3XI9L/4+5fr+vQ==}
peerDependencies:
'@sveltejs/kit': ^1 || ^2
next: '>= 13'
react: ^18 || ^19 || ^19.0.0-rc
svelte: '>= 4'
vue: ^3
vue-router: ^4
peerDependenciesMeta:
'@sveltejs/kit':
optional: true
next:
optional: true
react:
optional: true
svelte:
optional: true
vue:
optional: true
vue-router:
optional: true
'@vitejs/plugin-react@4.5.2':
resolution: {integrity: sha512-QNVT3/Lxx99nMQWJWF7K4N6apUEuT0KlZA3mx/mVaoGj3smm/8rc8ezz15J1pcbcjDK0V15rpHetVfya08r76Q==}
engines: {node: ^14.18.0 || >=16.0.0}
@ -6807,6 +6862,16 @@ snapshots:
'@unrs/resolver-binding-win32-x64-msvc@1.11.1':
optional: true
'@vercel/analytics@1.6.1(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4))(react@19.2.4)':
optionalDependencies:
next: 16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4)
react: 19.2.4
'@vercel/speed-insights@1.3.1(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4))(react@19.2.4)':
optionalDependencies:
next: 16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4)
react: 19.2.4
'@vitejs/plugin-react@4.5.2(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.77.4)(tsx@4.21.0)(yaml@2.8.2))':
dependencies:
'@babel/core': 7.29.0

View file

@ -8,6 +8,8 @@ import React from 'react'
import './styles.css'
import { ThemeProvider } from '@/components/ThemeProvider'
import { Inter } from 'next/font/google'
import { SpeedInsights } from '@vercel/speed-insights/next'
import { Analytics } from '@vercel/analytics/next'
const inter = Inter({ subsets: ['latin'], variable: '--font-sans' })
@ -74,6 +76,8 @@ export default async function RootLayout(props: { children: React.ReactNode }) {
enableSystem
disableTransitionOnChange
>
<SpeedInsights />
<Analytics />
<RefreshRouteOnSave />
<Header />
{children}

View file

@ -4,7 +4,7 @@ import config from '@payload-config'
import '@payloadcms/next/css'
import type { ServerFunctionClient } from 'payload'
import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
import React from 'react'
import React, { Suspense } from 'react'
import { importMap } from './admin/importMap.js'
import './custom.scss'
@ -23,9 +23,11 @@ const serverFunction: ServerFunctionClient = async function (args) {
}
const Layout = ({ children }: Args) => (
<RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
{children}
</RootLayout>
<Suspense>
<RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
{children}
</RootLayout>
</Suspense>
)
export default Layout

View file

@ -25,4 +25,5 @@ export const getCachedGlobal = async <Slug extends Global>(slug: Slug, depth?: n
return await getGlobal(slug, depth)
}
export const revalidateGlobal = <Slug extends Global>(slug: Slug) => revalidateTag(getTag(slug), 'max')
export const revalidateGlobal = <Slug extends Global>(slug: Slug) =>
revalidateTag(getTag(slug), 'max')