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}

.vscode/extensions.json

@@ -1,5 +1,6 @@
 import config from '@/lib/config'
 import getCategoryBySlug from '@/lib/queries/getCategoryBySlug'
+import {DynamicPageProps} from '@/lib/types'
 import {Metadata} from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -12,10 +13,9 @@ import {notFound} from 'next/navigation'
  */
 export async function generateMetadata({
   params
-}: {
-  params: {slug: string}
-}): Promise<Metadata | null> {
-  const slug = params.slug
+}: DynamicPageProps): Promise<Metadata | null> {
+  // Get the slug from the params.
+  const {slug} = await params
 
   return {
     title: `${slug} Archives - ${config.siteName}`,
@@ -28,13 +28,12 @@ export async function generateMetadata({
  *
  * @see https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages
  */
-export default async function CategoryArchive({
-  params
-}: {
-  params: {slug: string}
-}) {
+export default async function CategoryArchive({params}: DynamicPageProps) {
+  // Get the slug from the params.
+  const {slug} = await params
+
   // Fetch posts from WordPress.
-  const posts = await getCategoryBySlug(params.slug)
+  const posts = await getCategoryBySlug(slug)
 
   // No posts? Bail...
   if (!posts) {
@@ -43,7 +42,7 @@ export default async function CategoryArchive({
 
   return (
     <main className="flex flex-col gap-8">
-      <h1 className="capitalize">Post Category: {params.slug}</h1>
+      <h1 className="capitalize">Post Category: {slug}</h1>
       <div className="flex flex-wrap gap-8">
         {posts.map((post) => (
           <article className="w-72" key={post.databaseId}>

app/[slug]/page.tsx

@@ -1,5 +1,6 @@
 import config from '@/lib/config'
 import getTagBySlug from '@/lib/queries/getTagBySlug'
+import type {DynamicPageProps} from '@/lib/types'
 import {Metadata} from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -12,10 +13,9 @@ import {notFound} from 'next/navigation'
  */
 export async function generateMetadata({
   params
-}: {
-  params: {slug: string}
-}): Promise<Metadata | null> {
-  const slug = params.slug
+}: DynamicPageProps): Promise<Metadata | null> {
+  // Get the slug from the params.
+  const {slug} = await params
 
   return {
     title: `${slug} Archives - ${config.siteName}`,
@@ -28,9 +28,12 @@ export async function generateMetadata({
  *
  * @see https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages
  */
-export default async function TagArchive({params}: {params: {slug: string}}) {
+export default async function TagArchive({params}: DynamicPageProps) {
+  // Get the slug from the params.
+  const {slug} = await params
+
   // Fetch posts from WordPress.
-  const posts = await getTagBySlug(params.slug)
+  const posts = await getTagBySlug(slug)
 
   // No posts? Bail...
   if (!posts) {
@@ -39,7 +42,7 @@ export default async function TagArchive({params}: {params: {slug: string}}) {
 
   return (
     <main className="flex flex-col gap-8">
-      <h1 className="capitalize">Post Tag: {params.slug}</h1>
+      <h1 className="capitalize">Post Tag: {slug}</h1>
       <div className="flex flex-wrap gap-8">
         {posts.map((post) => (
           <article className="w-72" key={post.databaseId}>

app/api/revalidate/route.ts

@@ -1,5 +1,6 @@
 import getAllBooks from '@/lib/queries/getAllBooks'
 import getBookBySlug from '@/lib/queries/getBookBySlug'
+import type {DynamicPageProps} from '@/lib/types'
 import {Metadata} from 'next'
 import Link from 'next/link'
 import {notFound} from 'next/navigation'
@@ -31,11 +32,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 page.
-  const book = await getBookBySlug(params.slug)
+  const book = await getBookBySlug(slug)
 
   // No post? Bail...
   if (!book) {
@@ -53,9 +55,12 @@ export async function generateMetadata({
  *
  * @see https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages
  */
-export default async function Book({params}: {params: {slug: string}}) {
+export default async function Book({params}: DynamicPageProps) {
+  // Get the slug from the params.
+  const {slug} = await params
+
   // Fetch a single book from WordPress.
-  const book = await getBookBySlug(params.slug)
+  const book = await getBookBySlug(slug)
 
   // No book? Bail...
   if (!book) {

app/blog/[slug]/page.tsx

@@ -1,33 +1,31 @@
-/* https://nextjs.org/docs/app/building-your-application/styling/tailwind-css */
+@import 'tailwindcss';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* Example Styles. Delete to start fresh! */
+body {
+  @apply container mx-auto p-4 grid grid-cols-1 gap-4;
+  @apply text-xl;
+}
+
+h1 {
+  @apply text-4xl font-bold;
+}
+
+h2 {
+  @apply text-2xl font-bold;
+}
 
-@layer base {
-  body {
-    @apply relative mx-auto space-y-8 px-4 py-8 antialiased;
-    @apply prose prose-zinc dark:prose-invert;
-    @apply dark:bg-zinc-900;
-  }
+h3 {
+  @apply text-xl font-bold;
+}
 
-  input {
-    @apply rounded px-4 py-2;
-    @apply text-zinc-900;
-    @apply bg-zinc-200 dark:bg-zinc-200;
-  }
+a {
+  @apply text-blue-500 underline;
+}
 
-  textarea {
-    @apply rounded px-4 py-2;
-    @apply text-zinc-900;
-    @apply bg-zinc-200 dark:bg-zinc-200;
-  }
+p {
+  @apply my-4;
+}
 
-  button,
-  .button,
-  [type='submit'] {
-    @apply rounded px-4 py-3 leading-tight no-underline;
-    @apply bg-zinc-200 text-zinc-900 dark:bg-zinc-400;
-    @apply hover:bg-zinc-300 dark:hover:bg-zinc-500;
-  }
+input {
+  @apply p-2 border border-gray-300 rounded;
 }

app/blog/category/[slug]/page.tsx

@@ -1,7 +1,7 @@
 import Footer from '@/components/Footer'
 import Header from '@/components/Header'
 import config from '@/lib/config'
-import type {Metadata, Viewport} from 'next'
+import type {Metadata} from 'next'
 import './globals.css'
 
 /**
@@ -15,16 +15,6 @@ export const metadata: Metadata = {
   description: config.siteDescription
 }
 
-/**
- * Setup viewport.
- *
- * @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport
- */
-export const viewport: Viewport = {
-  colorScheme: 'dark',
-  themeColor: '#18181b'
-}
-
 /**
  * Root layout component.
  *

app/blog/tag/[slug]/page.tsx

@@ -6,7 +6,7 @@ import {headers} from 'next/headers'
  * @see https://nextjs.org/docs/app/api-reference/file-conventions/not-found
  */
 export default async function NotFound() {
-  const headersList = headers()
+  const headersList = await headers()
   const referer = headersList.get('referer')
 
   return (