build(deps): bump postcss, @next/third-parties and next

package.json

@@ -19,7 +19,7 @@
     "@mantine/core": "^8.0.2",
     "@mantine/hooks": "^8.0.2",
     "@mantine/spotlight": "^8.0.2",
-    "@next/third-parties": "^15.3.2",
+    "@next/third-parties": "^16.3.0",
     "@tabler/icons-react": "^3.31.0",
     "@types/semver": "^7.7.0",
     "dayjs": "^1.11.13",
@@ -29,7 +29,7 @@
     "hast-util-select": "^6.0.4",
     "hastscript": "^9.0.1",
     "html-entities": "^2.6.0",
-    "next": "15.5.22",
+    "next": "16.3.0",
     "octokit": "^4.1.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -53,7 +53,7 @@
     "eslint": "^9",
     "eslint-config-next": "15.3.1",
     "pagefind": "^1.5.0",
-    "postcss": "^8.5.18",
+    "postcss": "^8.5.23",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "tsx": "^4.22.4",

src/app/blog/page.tsx

@@ -2,10 +2,10 @@ import { getAllPosts } from "@/blog-helpers";
 import PromMarkdown from "@/components/PromMarkdown";
 import TOC from "@/components/TOC";
 import { getPageMetadata } from "@/page-metadata";
-import { Anchor, Title, Text, Card, Stack, Button, Group } from "@mantine/core";
+import { Title, Text, Card, Stack, Group } from "@mantine/core";
+import { LinkAnchor, LinkButton } from "@/components/NextLinks";
 import dayjs from "dayjs";
 import { Metadata } from "next";
-import Link from "next/link";
 
 export const metadata: Metadata = getPageMetadata({
   pageTitle: "Blog",
@@ -35,26 +35,25 @@ export default function BlogPage() {
             // on the Card breaks the scroll-margin-top of the Title / h1, and
             // the title ends up under the sticky header.
             <Card key={path} withBorder style={{ overflow: "unset" }}>
-              <Anchor component={Link} c="inherit" href={path}>
+              <LinkAnchor c="inherit" href={path}>
                 <Title order={1} mt={0} mb="xs" id={headingSlug(params)}>
                   {frontmatter.title}
                 </Title>
-              </Anchor>
+              </LinkAnchor>
               <Text size="sm" c="dimmed" mb="xs">
                 {dayjs(frontmatter.created_at).format("MMMM D, YYYY")} by{" "}
                 {frontmatter.author_name}
               </Text>
               <PromMarkdown>{excerpt}</PromMarkdown>
 
-              <Button
-                component={Link}
+              <LinkButton
                 href={path}
                 variant="light"
                 mt="md"
                 w={{ base: "100%", xs: "fit-content" }}
               >
                 Read more...
-              </Button>
+              </LinkButton>
             </Card>
           ))}
       </Stack>

src/app/docs/[...slug]/PrevNextEditButtons.tsx

@@ -1,12 +1,12 @@
 import { Group, Box, Button, Text, Stack } from "@mantine/core";
-import Link from "next/link";
 import {
   IconArrowRight,
   IconArrowLeft,
   IconPencil,
   IconBug,
 } from "@tabler/icons-react";
 import { DocMetadata } from "@/docs-collection-types";
+import { LinkButton } from "@/components/NextLinks";
 
 function buildIssueUrl(currentPage: DocMetadata): string {
   const repoBase =
@@ -38,9 +38,8 @@ export default function PrevNextEditButtons({
     >
       <Box flex="0 1 40%" maw="40%">
         {currentPage.prev && (
-          <Button
+          <LinkButton
             w="100%"
-            component={Link}
             href={`/docs/${currentPage.prev.slug}/`}
             variant="outline"
             color="var(--mantine-color-text)"
@@ -63,7 +62,7 @@ export default function PrevNextEditButtons({
                 {currentPage.prev.navTitle ?? currentPage.prev.title}
               </Text>
             </Stack>
-          </Button>
+          </LinkButton>
         )}
       </Box>
       <Group gap="xs" wrap="nowrap">
@@ -115,9 +114,8 @@ export default function PrevNextEditButtons({
       </Group>
       <Box flex="0 1 40%" maw="40%" ta="right">
         {currentPage.next && (
-          <Button
+          <LinkButton
             w="100%"
-            component={Link}
             href={`/docs/${currentPage.next.slug}/`}
             variant="outline"
             color="var(--mantine-color-text)"
@@ -140,7 +138,7 @@ export default function PrevNextEditButtons({
                 {currentPage.next.navTitle ?? currentPage.next.title}
               </Text>
             </Stack>
-          </Button>
+          </LinkButton>
         )}
       </Box>
     </Group>

src/app/download/page.tsx

@@ -1,8 +1,8 @@
 import TOC from "@/components/TOC";
 import { getPageMetadata } from "@/page-metadata";
 import { Anchor, Box, Group, Title } from "@mantine/core";
+import { LinkAnchor } from "@/components/NextLinks";
 import { Metadata } from "next";
-import Link from "next/link";
 import React from "react";
 import DownloadsSelector from "./DownloadsSelector";
 
@@ -37,13 +37,12 @@ export default function DownloadPage() {
           <p>
             There is also a constantly growing number of independently
             maintained exporters listed at{" "}
-            <Anchor
+            <LinkAnchor
               c="var(--secondary-link-color)"
-              component={Link}
               href="/docs/instrumenting/exporters/"
             >
               Exporters and integrations
-            </Anchor>
+            </LinkAnchor>
             .
           </p>
 

src/app/page.tsx

@@ -1,5 +1,5 @@
-import NextImage from "next/image";
-import { Badge, Blockquote, Box, Image } from "@mantine/core";
+import { Badge, Blockquote, Box } from "@mantine/core";
+import { NextMantineImage } from "@/components/NextLinks";
 import classes from "@/components/FeaturesCards.module.css";
 import { FeaturesCards } from "@/components/FeaturesCards";
 import { Hero } from "@/components/Hero";
@@ -52,8 +52,7 @@ export default function Home() {
       {/* <Space h="xl" mb={50} /> */}
       <Title order={2} className={classes.title} mt="sm">
         <Group justify="center">
-          <Image
-            component={NextImage}
+          <NextMantineImage
             src={githubLogo}
             style={{ height: 40, width: 40 }}
             className="invertInDarkMode"
@@ -88,19 +87,17 @@ export default function Home() {
         </Text>
         <Box mt="md">
           <a href="https://cncf.io/" target="_blank">
-            <Image
+            <NextMantineImage
               darkHidden
-              component={NextImage}
               src={cncfLogoLightMode}
               alt="CNCF logo"
               style={{
                 objectFit: "fill",
               }}
             />
 
-            <Image
+            <NextMantineImage
               lightHidden
-              component={NextImage}
               src={cncfLogoDarkMode}
               alt="CNCF logo"
               style={{

src/components/FeaturesCards.tsx

@@ -1,4 +1,4 @@
-import { Text, Card, SimpleGrid, Container, rem } from "@mantine/core";
+import { Text, SimpleGrid, Container, rem } from "@mantine/core";
 import {
   IconGauge,
   IconChartGridDots,
@@ -8,7 +8,7 @@ import {
   IconAffiliate,
 } from "@tabler/icons-react";
 import classes from "./FeaturesCards.module.css";
-import Link from "next/link";
+import { LinkCard } from "./NextLinks";
 
 const features = [
   {
@@ -63,9 +63,8 @@ export function FeaturesCards() {
     <Container size="lg" px={0}>
       <SimpleGrid cols={{ base: 1, xs: 2, sm: 3 }} spacing="xl">
         {features.map((feature) => (
-          <Card
+          <LinkCard
             key={feature.title}
-            component={Link}
             href={feature.link}
             shadow="md"
             radius="md"
@@ -83,7 +82,7 @@ export function FeaturesCards() {
             <Text fz="sm" c="dimmed" mt="sm">
               {feature.description}
             </Text>
-          </Card>
+          </LinkCard>
         ))}
       </SimpleGrid>
     </Container>

src/components/Hero.tsx

@@ -1,9 +1,9 @@
-import { Title, Text, Button, Container, Group } from "@mantine/core";
+import { Title, Text, Container, Group } from "@mantine/core";
 import { Dots } from "./Dots";
 import classes from "./Hero.module.css";
 import { IconDownload } from "@tabler/icons-react";
-import Link from "next/link";
 import React from "react";
+import { LinkButton } from "./NextLinks";
 
 // Based on the design at https://ui.mantine.dev/category/hero/#hero-text.
 export function Hero() {
@@ -35,16 +35,14 @@ export function Hero() {
             { size: "xl", visibleFrom: "md", mt: "xs" },
           ].map((props) => (
             <React.Fragment key={props.size}>
-              <Button
-                component={Link}
+              <LinkButton
                 href="/docs/prometheus/latest/getting_started/"
                 w={{ base: "100%", xs: "fit-content" }}
                 {...props}
               >
                 Get started
-              </Button>
-              <Button
-                component={Link}
+              </LinkButton>
+              <LinkButton
                 href="/download/"
                 variant="default"
                 color="gray"
@@ -53,7 +51,7 @@ export function Hero() {
                 {...props}
               >
                 Download
-              </Button>
+              </LinkButton>
             </React.Fragment>
           ))}
         </Group>

src/components/NextLinks.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import {
+  Anchor,
+  type AnchorProps,
+  Button,
+  type ButtonProps,
+  Card,
+  type CardProps,
+  Image,
+  type ImageProps,
+  type PolymorphicComponentProps,
+} from "@mantine/core";
+import Link from "next/link";
+import NextImage from "next/image";
+
+// Client-only wrappers around Mantine's polymorphic components. Next.js 16 /
+// React 19 no longer allow passing a component (a function) as a prop across
+// the server/client boundary, so the `component={Link}` / `component={NextImage}`
+// pattern has to live inside a Client Component. These small wrappers let the
+// surrounding pages stay Server Components.
+
+export function LinkAnchor(
+  props: PolymorphicComponentProps<typeof Link, AnchorProps>
+) {
+  return <Anchor {...props} component={Link} />;
+}
+
+export function LinkButton(
+  props: PolymorphicComponentProps<typeof Link, ButtonProps>
+) {
+  return <Button {...props} component={Link} />;
+}
+
+export function LinkCard(
+  props: PolymorphicComponentProps<typeof Link, CardProps>
+) {
+  return <Card {...props} component={Link} />;
+}
+
+export function NextMantineImage(
+  props: PolymorphicComponentProps<typeof NextImage, ImageProps>
+) {
+  // `alt` is provided by callers and forwarded via `props`, but eslint can't
+  // statically see it through the spread.
+  // eslint-disable-next-line jsx-a11y/alt-text
+  return <Image {...props} component={NextImage} />;
+}

src/components/PromMarkdown.tsx

@@ -19,8 +19,8 @@ import {
   IconInfoCircle,
   IconExternalLink,
 } from "@tabler/icons-react";
-import Link from "next/link";
 import { Children, HTMLAttributes, PropsWithChildren } from "react";
+import { LinkAnchor } from "./NextLinks";
 import { MarkdownAsync } from "react-markdown";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeRaw from "rehype-raw";
@@ -118,15 +118,14 @@ export default async function PromMarkdown({
 
             if (!isExternalLink) {
               return (
-                <Anchor
+                <LinkAnchor
                   inherit
                   c="var(--secondary-link-color)"
-                  component={Link}
                   {...rest}
                   href={href || ""}
                 >
                   {children}
-                </Anchor>
+                </LinkAnchor>
               );
             }