next.js 15 and tailwind 4 support

Author: gregrickaby

.eslintignore

@@ -1 +1 @@
-lts/*
+22

.eslintrc.js

@@ -4,5 +4,6 @@ module.exports = {
   singleQuote: true,
   bracketSpacing: false,
   semi: false,
-  trailingComma: 'none'
+  trailingComma: 'none',
+  plugins: ['prettier-plugin-tailwindcss']
 }

.nvmrc

@@ -3,7 +3,6 @@
     "EditorConfig.EditorConfig",
     "GraphQL.vscode-graphql-syntax",
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "stylelint.vscode-stylelint"
+    "esbenp.prettier-vscode"
   ]
 }

.prettierrc.js

@@ -1,6 +1,7 @@
 import getAllBooks from '@/lib/queries/getAllBooks'
 import getAllPosts from '@/lib/queries/getAllPosts'
 import getPageBySlug from '@/lib/queries/getPageBySlug'
+import type {DynamicPageProps} from '@/lib/types'
 import {Page, Post} from '@/lib/types'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -83,9 +84,9 @@ function RenderPostsList({posts, context}: {posts: Post[]; context: string}) {
 /**
  * Catch-all Archive Page route.
  */
-export default async function Archive({params}: {params: {slug: string}}) {
+export default async function Archive({params}: DynamicPageProps) {
   // Get the slug from the params.
-  const {slug} = params
+  const {slug} = await params
 
   // Fetch data from WordPress.
   const data = await fetchData(slug)

.stylelintignore

@@ -1,11 +1,6 @@
 import {revalidatePath, revalidateTag} from 'next/cache'
 import {NextRequest} from 'next/server'
 
-/**
- * Route segment configuration.
- */
-export const runtime = 'edge'
-
 /**
  * On-demand revalidation.
  *

.stylelintrc.js

@@ -1,7 +1,9 @@
 import CommentForm from '@/components/CommentForm'
 import getAllPosts from '@/lib/queries/getAllPosts'
 import getPostBySlug from '@/lib/queries/getPostBySlug'
+import type {DynamicPageProps} from '@/lib/types'
 import {Metadata} from 'next'
+import Image from 'next/image'
 import Link from 'next/link'
 import {notFound} from 'next/navigation'
 
@@ -32,11 +34,12 @@ export async function generateStaticParams() {
  */
 export async function generateMetadata({
   params
-}: {
-  params: {slug: string}
-}): Promise<Metadata | null> {
+}: DynamicPageProps): Promise<Metadata | null> {
+  // Get the slug from the params.
+  const {slug} = await params
+
   // Get the blog post.
-  const post = await getPostBySlug(params.slug)
+  const post = await getPostBySlug(slug)
 
   // No post? Bail...
   if (!post) {
@@ -54,9 +57,12 @@ export async function generateMetadata({
  *
  * @see https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages
  */
-export default async function Post({params}: {params: {slug: string}}) {
+export default async function Post({params}: DynamicPageProps) {
+  // Get the slug from the params.
+  const {slug} = await params
+
   // Fetch a single post from WordPress.
-  const post = await getPostBySlug(params.slug)
+  const post = await getPostBySlug(slug)
 
   // No post? Bail...
   if (!post) {
@@ -102,7 +108,7 @@ export default async function Post({params}: {params: {slug: string}}) {
         {post.comments.nodes.map((comment) => (
           <article key={comment.databaseId}>
             <header className="flex items-center gap-2">
-              <img
+              <Image
                 alt={comment.author.node.name}
                 className="m-0 rounded-full"
                 height={64}