Skip to content

Commit 3437529

Browse files
gregrickabygregrickaby
committed
next.js 15 and tailwind 4 support
1 parent 1e14589 commit 3437529

29 files changed

+2309
-2859
lines changed

Diff for: ‎.eslintignore

-8
This file was deleted.

Diff for: ‎.eslintrc.js

-8
This file was deleted.

Diff for: ‎.nvmrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
lts/*
1+
22

Diff for: ‎.prettierrc.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ module.exports = {
44
singleQuote: true,
55
bracketSpacing: false,
66
semi: false,
7-
trailingComma: 'none'
7+
trailingComma: 'none',
8+
plugins: ['prettier-plugin-tailwindcss']
89
}

Diff for: ‎.stylelintignore

-8
This file was deleted.

Diff for: ‎.stylelintrc.js

-20
This file was deleted.

Diff for: ‎.vscode/extensions.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"EditorConfig.EditorConfig",
44
"GraphQL.vscode-graphql-syntax",
55
"dbaeumer.vscode-eslint",
6-
"esbenp.prettier-vscode",
7-
"stylelint.vscode-stylelint"
6+
"esbenp.prettier-vscode"
87
]
98
}

Diff for: ‎app/[slug]/page.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import getAllBooks from '@/lib/queries/getAllBooks'
22
import getAllPosts from '@/lib/queries/getAllPosts'
33
import getPageBySlug from '@/lib/queries/getPageBySlug'
4+
import type {DynamicPageProps} from '@/lib/types'
45
import {Page, Post} from '@/lib/types'
56
import Image from 'next/image'
67
import Link from 'next/link'
@@ -83,9 +84,9 @@ function RenderPostsList({posts, context}: {posts: Post[]; context: string}) {
8384
/**
8485
* Catch-all Archive Page route.
8586
*/
86-
export default async function Archive({params}: {params: {slug: string}}) {
87+
export default async function Archive({params}: DynamicPageProps) {
8788
// Get the slug from the params.
88-
const {slug} = params
89+
const {slug} = await params
8990

9091
// Fetch data from WordPress.
9192
const data = await fetchData(slug)

Diff for: ‎app/api/revalidate/route.ts

-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import {revalidatePath, revalidateTag} from 'next/cache'
22
import {NextRequest} from 'next/server'
33

4-
/**
5-
* Route segment configuration.
6-
*/
7-
export const runtime = 'edge'
8-
94
/**
105
* On-demand revalidation.
116
*

Diff for: ‎app/blog/[slug]/page.tsx

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import CommentForm from '@/components/CommentForm'
22
import getAllPosts from '@/lib/queries/getAllPosts'
33
import getPostBySlug from '@/lib/queries/getPostBySlug'
4+
import type {DynamicPageProps} from '@/lib/types'
45
import {Metadata} from 'next'
6+
import Image from 'next/image'
57
import Link from 'next/link'
68
import {notFound} from 'next/navigation'
79

@@ -32,11 +34,12 @@ export async function generateStaticParams() {
3234
*/
3335
export async function generateMetadata({
3436
params
35-
}: {
36-
params: {slug: string}
37-
}): Promise<Metadata | null> {
37+
}: DynamicPageProps): Promise<Metadata | null> {
38+
// Get the slug from the params.
39+
const {slug} = await params
40+
3841
// Get the blog post.
39-
const post = await getPostBySlug(params.slug)
42+
const post = await getPostBySlug(slug)
4043

4144
// No post? Bail...
4245
if (!post) {
@@ -54,9 +57,12 @@ export async function generateMetadata({
5457
*
5558
* @see https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages
5659
*/
57-
export default async function Post({params}: {params: {slug: string}}) {
60+
export default async function Post({params}: DynamicPageProps) {
61+
// Get the slug from the params.
62+
const {slug} = await params
63+
5864
// Fetch a single post from WordPress.
59-
const post = await getPostBySlug(params.slug)
65+
const post = await getPostBySlug(slug)
6066

6167
// No post? Bail...
6268
if (!post) {
@@ -102,7 +108,7 @@ export default async function Post({params}: {params: {slug: string}}) {
102108
{post.comments.nodes.map((comment) => (
103109
<article key={comment.databaseId}>
104110
<header className="flex items-center gap-2">
105-
<img
111+
<Image
106112
alt={comment.author.node.name}
107113
className="m-0 rounded-full"
108114
height={64}

Diff for: ‎app/blog/category/[slug]/page.tsx

+10-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import config from '@/lib/config'
22
import getCategoryBySlug from '@/lib/queries/getCategoryBySlug'
3+
import {DynamicPageProps} from '@/lib/types'
34
import {Metadata} from 'next'
45
import Image from 'next/image'
56
import Link from 'next/link'
@@ -12,10 +13,9 @@ import {notFound} from 'next/navigation'
1213
*/
1314
export async function generateMetadata({
1415
params
15-
}: {
16-
params: {slug: string}
17-
}): Promise<Metadata | null> {
18-
const slug = params.slug
16+
}: DynamicPageProps): Promise<Metadata | null> {
17+
// Get the slug from the params.
18+
const {slug} = await params
1919

2020
return {
2121
title: `${slug} Archives - ${config.siteName}`,
@@ -28,13 +28,12 @@ export async function generateMetadata({
2828
*
2929
* @see https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages
3030
*/
31-
export default async function CategoryArchive({
32-
params
33-
}: {
34-
params: {slug: string}
35-
}) {
31+
export default async function CategoryArchive({params}: DynamicPageProps) {
32+
// Get the slug from the params.
33+
const {slug} = await params
34+
3635
// Fetch posts from WordPress.
37-
const posts = await getCategoryBySlug(params.slug)
36+
const posts = await getCategoryBySlug(slug)
3837

3938
// No posts? Bail...
4039
if (!posts) {
@@ -43,7 +42,7 @@ export default async function CategoryArchive({
4342

4443
return (
4544
<main className="flex flex-col gap-8">
46-
<h1 className="capitalize">Post Category: {params.slug}</h1>
45+
<h1 className="capitalize">Post Category: {slug}</h1>
4746
<div className="flex flex-wrap gap-8">
4847
{posts.map((post) => (
4948
<article className="w-72" key={post.databaseId}>

Diff for: ‎app/blog/tag/[slug]/page.tsx

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import config from '@/lib/config'
22
import getTagBySlug from '@/lib/queries/getTagBySlug'
3+
import type {DynamicPageProps} from '@/lib/types'
34
import {Metadata} from 'next'
45
import Image from 'next/image'
56
import Link from 'next/link'
@@ -12,10 +13,9 @@ import {notFound} from 'next/navigation'
1213
*/
1314
export async function generateMetadata({
1415
params
15-
}: {
16-
params: {slug: string}
17-
}): Promise<Metadata | null> {
18-
const slug = params.slug
16+
}: DynamicPageProps): Promise<Metadata | null> {
17+
// Get the slug from the params.
18+
const {slug} = await params
1919

2020
return {
2121
title: `${slug} Archives - ${config.siteName}`,
@@ -28,9 +28,12 @@ export async function generateMetadata({
2828
*
2929
* @see https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages
3030
*/
31-
export default async function TagArchive({params}: {params: {slug: string}}) {
31+
export default async function TagArchive({params}: DynamicPageProps) {
32+
// Get the slug from the params.
33+
const {slug} = await params
34+
3235
// Fetch posts from WordPress.
33-
const posts = await getTagBySlug(params.slug)
36+
const posts = await getTagBySlug(slug)
3437

3538
// No posts? Bail...
3639
if (!posts) {
@@ -39,7 +42,7 @@ export default async function TagArchive({params}: {params: {slug: string}}) {
3942

4043
return (
4144
<main className="flex flex-col gap-8">
42-
<h1 className="capitalize">Post Tag: {params.slug}</h1>
45+
<h1 className="capitalize">Post Tag: {slug}</h1>
4346
<div className="flex flex-wrap gap-8">
4447
{posts.map((post) => (
4548
<article className="w-72" key={post.databaseId}>

Diff for: ‎app/books/[slug]/page.tsx

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import getAllBooks from '@/lib/queries/getAllBooks'
22
import getBookBySlug from '@/lib/queries/getBookBySlug'
3+
import type {DynamicPageProps} from '@/lib/types'
34
import {Metadata} from 'next'
45
import Link from 'next/link'
56
import {notFound} from 'next/navigation'
@@ -31,11 +32,12 @@ export async function generateStaticParams() {
3132
*/
3233
export async function generateMetadata({
3334
params
34-
}: {
35-
params: {slug: string}
36-
}): Promise<Metadata | null> {
35+
}: DynamicPageProps): Promise<Metadata | null> {
36+
// Get the slug from the params.
37+
const {slug} = await params
38+
3739
// Get the page.
38-
const book = await getBookBySlug(params.slug)
40+
const book = await getBookBySlug(slug)
3941

4042
// No post? Bail...
4143
if (!book) {
@@ -53,9 +55,12 @@ export async function generateMetadata({
5355
*
5456
* @see https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages
5557
*/
56-
export default async function Book({params}: {params: {slug: string}}) {
58+
export default async function Book({params}: DynamicPageProps) {
59+
// Get the slug from the params.
60+
const {slug} = await params
61+
5762
// Fetch a single book from WordPress.
58-
const book = await getBookBySlug(params.slug)
63+
const book = await getBookBySlug(slug)
5964

6065
// No book? Bail...
6166
if (!book) {

Diff for: ‎app/globals.css

+25-27
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,31 @@
1-
/* https://nextjs.org/docs/app/building-your-application/styling/tailwind-css */
1+
@import 'tailwindcss';
22

3-
@tailwind base;
4-
@tailwind components;
5-
@tailwind utilities;
3+
/* Example Styles. Delete to start fresh! */
4+
body {
5+
@apply container mx-auto p-4 grid grid-cols-1 gap-4;
6+
@apply text-xl;
7+
}
8+
9+
h1 {
10+
@apply text-4xl font-bold;
11+
}
12+
13+
h2 {
14+
@apply text-2xl font-bold;
15+
}
616

7-
@layer base {
8-
body {
9-
@apply relative mx-auto space-y-8 px-4 py-8 antialiased;
10-
@apply prose prose-zinc dark:prose-invert;
11-
@apply dark:bg-zinc-900;
12-
}
17+
h3 {
18+
@apply text-xl font-bold;
19+
}
1320

14-
input {
15-
@apply rounded px-4 py-2;
16-
@apply text-zinc-900;
17-
@apply bg-zinc-200 dark:bg-zinc-200;
18-
}
21+
a {
22+
@apply text-blue-500 underline;
23+
}
1924

20-
textarea {
21-
@apply rounded px-4 py-2;
22-
@apply text-zinc-900;
23-
@apply bg-zinc-200 dark:bg-zinc-200;
24-
}
25+
p {
26+
@apply my-4;
27+
}
2528

26-
button,
27-
.button,
28-
[type='submit'] {
29-
@apply rounded px-4 py-3 leading-tight no-underline;
30-
@apply bg-zinc-200 text-zinc-900 dark:bg-zinc-400;
31-
@apply hover:bg-zinc-300 dark:hover:bg-zinc-500;
32-
}
29+
input {
30+
@apply p-2 border border-gray-300 rounded;
3331
}

Diff for: ‎app/layout.tsx

+1-11
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Footer from '@/components/Footer'
22
import Header from '@/components/Header'
33
import config from '@/lib/config'
4-
import type {Metadata, Viewport} from 'next'
4+
import type {Metadata} from 'next'
55
import './globals.css'
66

77
/**
@@ -15,16 +15,6 @@ export const metadata: Metadata = {
1515
description: config.siteDescription
1616
}
1717

18-
/**
19-
* Setup viewport.
20-
*
21-
* @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport
22-
*/
23-
export const viewport: Viewport = {
24-
colorScheme: 'dark',
25-
themeColor: '#18181b'
26-
}
27-
2818
/**
2919
* Root layout component.
3020
*

Diff for: ‎app/not-found.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {headers} from 'next/headers'
66
* @see https://nextjs.org/docs/app/api-reference/file-conventions/not-found
77
*/
88
export default async function NotFound() {
9-
const headersList = headers()
9+
const headersList = await headers()
1010
const referer = headersList.get('referer')
1111

1212
return (

0 commit comments

Comments
 (0)