Merge pull request #72 from timlrx/update-examples

update examples to next v15 and tailwind v4

Author: timlrx

examples/next-images/app/posts/[slug]/page.tsx

@@ -5,12 +5,14 @@ import Image from 'next/image'
 
 export const generateStaticParams = async () => allPosts.map((post) => ({ slug: post._raw.flattenedPath }))
 
-export const generateMetadata = ({ params }) => {
+export const generateMetadata = async props => {
+  const params = await props.params;
   const post = allPosts.find((post) => post._raw.flattenedPath === params.slug)
   return { title: post.title }
 }
 
-const PostLayout = ({ params }: { params: { slug: string } }) => {
+const PostLayout = async (props: { params: Promise<{ slug: string }> }) => {
+  const params = await props.params;
   const post = allPosts.find((post) => post._raw.flattenedPath === params.slug)
 
   const Content = getMDXComponent(post.body.code)

examples/next-images/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/next-images/package.json

@@ -9,17 +9,17 @@
   },
   "dependencies": {
     "contentlayer2": "latest",
-    "date-fns": "3.6.0",
-    "next": "^14.1.0",
+    "date-fns": "4.1.0",
+    "next": "^15.2.4",
     "next-contentlayer2": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.14",
-    "autoprefixer": "^10.4.14",
+    "@tailwindcss/postcss": "4.0.17",
+    "@types/react": "19.0.12",
     "postcss": "^8.4.24",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "4.0.17",
     "typescript": "^5.5.0"
   }
 }

examples/next-images/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

examples/next-images/styles/globals.css

@@ -1,8 +1,31 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap')
+layer(base);
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --font-sans:
+    Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 p {
   @apply mb-4;

examples/next-images/tailwind.config.js

@@ -2,7 +2,8 @@ import { allPosts } from 'contentlayer/generated'
 
 export const generateStaticParams = async () => allPosts.map((post) => ({ slug: post._raw.flattenedPath.split('/') }))
 
-const PostLayout = async ({ params }: { params: { slug: string[]; tag: string } }) => {
+const PostLayout = async (props: { params: Promise<{ slug: string[]; tag: string }> }) => {
+  const params = await props.params;
   const slug = params.slug.join('/')
   const post = allPosts.find((post) => post._raw.flattenedPath === slug)
 

examples/next-rsc-dynamic/app/[...slug]/page.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link'
-import { allPosts, Post } from 'contentlayer/generated'
+import { allPosts } from 'contentlayer/generated'
 
-export default async function Home({ params }: { params: { tag: string } }) {
+export default async function Home() {
   return (
     <div className="py-8 mx-auto max-w-xl">
       <h1 className="mb-8 text-3xl font-bold text-center">Next.js docs</h1>

examples/next-rsc-dynamic/app/page.tsx

@@ -1,6 +1,7 @@
 import { fetchContent } from 'contentlayer/generated'
 
-export const generateMetadata = async ({ params }: { params: { tag: string; slug: string[] } }) => {
+export const generateMetadata = async (props: { params: Promise<{ tag: string; slug: string[] }> }) => {
+  const params = await props.params;
   const contentResult = await fetchContent(params.tag)
 
   if (contentResult._tag === 'Error') {
@@ -21,7 +22,8 @@ export const generateMetadata = async ({ params }: { params: { tag: string; slug
   }
 }
 
-const PostLayout = async ({ params }: { params: { slug: string[]; tag: string } }) => {
+const PostLayout = async (props: { params: Promise<{ slug: string[]; tag: string }> }) => {
+  const params = await props.params;
   const contentResult = await fetchContent(params.tag)
 
   if (contentResult._tag === 'Error') {

examples/next-rsc-dynamic/app/v/[tag]/[...slug]/page.tsx

@@ -2,7 +2,8 @@ import Link from 'next/link'
 import { compareDesc, format, parseISO } from 'date-fns'
 import { fetchContent, Post } from 'contentlayer/generated'
 
-export default async function Home({ params }: { params: { tag: string } }) {
+export default async function Home(props: { params: Promise<{ tag: string }> }) {
+  const params = await props.params;
   const contentResult = await fetchContent(params.tag)
 
   if (contentResult._tag === 'Error') {
@@ -17,16 +18,15 @@ export default async function Home({ params }: { params: { tag: string } }) {
   const { allPosts } = contentResult.data
 
   return (
-    <div className="py-8 mx-auto max-w-xl">
+    (<div className="py-8 mx-auto max-w-xl">
       <h1 className="mb-8 text-3xl font-bold text-center">Next.js docs</h1>
       <p className="">Branch/Tag: {params.tag}</p>
-
       {allPosts.map((post, idx) => (
-        <div key={idx}>
+        (<div key={idx}>
           <Link href={'v/' + params.tag + '/' + post.url}>{post.url}</Link>
-        </div>
+        </div>)
         // <PostCard key={idx} {...post} />
       ))}
-    </div>
-  )
+    </div>)
+  );
 }