Merge pull request #310 from Jon1VK/v4

feat: add support for Next.js 15 async params
svobik7 · Dec 2, 2024 · 43bac07 · 43bac07
2 parents 6fe81cb + d83d26f
commit 43bac07
Show file tree

Hide file tree

Showing 25 changed files with 503 additions and 279 deletions.
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -21,13 +21,13 @@
     "@headlessui/react": "^2.1.2",
     "@heroicons/react": "^2.1.5",
     "clsx": "^2.1.1",
-    "next": "^14.2.5",
+    "next": "^15.0.3",
     "next-roots": "link:../../",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.2.5",
+    "@next/bundle-analyzer": "^15.0.3",
     "@tailwindcss/typography": "^0.5.13",
     "@types/node": "^20.14.12",
     "@types/react": "^18.3.3",

diff --git a/examples/basic/src/routes/@modal/(.)blogs/[author]/[article]/page.tsx b/examples/basic/src/routes/@modal/(.)blogs/[author]/[article]/page.tsx
@@ -1,4 +1,4 @@
-import type { GenerateStaticParamsProps, PageProps } from 'next-roots'
+import type { GeneratePageStaticParamsProps, PageProps } from 'next-roots'
 import { notFound, redirect } from 'next/navigation'
 import { ArticleDetail } from 'src/features/blog/components/ArticleDetail'
 import { getArticleLinkParams } from 'src/features/blog/utils/getArticleLinkParams'
@@ -10,17 +10,16 @@ import BackButton from 'src/features/common/components/BackButton'
 import { Links } from 'src/features/common/components/Links'
 import Modal from 'src/features/common/components/Modal'
 import { fetchArticleBySlug, fetchArticles, fetchAuthors } from 'src/server/db'
-import { getArticleHref, router } from 'src/server/router'
+import { getArticleHref, getPageHref } from 'src/server/router'
 import { getDictionary } from 'src/server/utils/getDictionary'
 
-type AuthorArticleParams = { author: string; article: string }
+type AuthorArticleParams = Promise<{ author: string; article: string }>
 
 export default async function AuthorArticlePage({
   params,
-  pageHref,
+  locale,
 }: PageProps<AuthorArticleParams>) {
-  const pageLocale = router.getLocaleFromHref(pageHref)
-  const article = await fetchArticleBySlug(params.article)
+  const article = await fetchArticleBySlug((await params).article)
 
   if (!article) {
     return notFound()
@@ -29,7 +28,7 @@ export default async function AuthorArticlePage({
   const allArticleTranslations = getAllArticleTranslations(article)
   const currentArticleTranslation = getArticleTranslation({
     article,
-    locale: pageLocale,
+    locale,
   })
 
   if (!currentArticleTranslation) {
@@ -38,11 +37,13 @@ export default async function AuthorArticlePage({
 
   const href = getArticleHref(currentArticleTranslation)
 
+  const pageHref = await getPageHref()
+
   if (pageHref !== href) {
     return redirect(href)
   }
 
-  const t = await getDictionary(pageLocale)
+  const t = await getDictionary(locale)
 
   return (
     <Modal>
@@ -62,7 +63,7 @@ export default async function AuthorArticlePage({
 
 export async function generateStaticParams({
   pageLocale,
-}: GenerateStaticParamsProps) {
+}: GeneratePageStaticParamsProps) {
   const authors = await fetchAuthors()
   const articles = await fetchArticles()
 

diff --git a/examples/basic/src/routes/@modal/(.)blogs/[author]/page.tsx b/examples/basic/src/routes/@modal/(.)blogs/[author]/page.tsx
@@ -1,4 +1,4 @@
-import type { GenerateStaticParamsProps, PageProps } from 'next-roots'
+import type { GeneratePageStaticParamsProps, PageProps } from 'next-roots'
 import { notFound } from 'next/navigation'
 import { AuthorDetail } from 'src/features/blog/components/AuthorDetail'
 import { getArticleLinkParams } from 'src/features/blog/utils/getArticleLinkParams'
@@ -16,17 +16,15 @@ import {
   fetchAuthorByUsername,
   fetchAuthors,
 } from 'src/server/db'
-import { router } from 'src/server/router'
 import { getDictionary } from 'src/server/utils/getDictionary'
 
-type AuthorParams = { author: string }
+type AuthorParams = Promise<{ author: string }>
 
 export default async function AuthorPage({
   params,
-  pageHref,
+  locale,
 }: PageProps<AuthorParams>) {
-  const pageLocale = router.getLocaleFromHref(pageHref)
-  const author = await fetchAuthorByUsername(params.author)
+  const author = await fetchAuthorByUsername((await params).author)
 
   if (!author) {
     return notFound()
@@ -35,7 +33,7 @@ export default async function AuthorPage({
   const allAuthorTranslations = getAllAuthorTranslations(author)
   const currentAuthorTranslation = getAuthorTranslation({
     author,
-    locale: pageLocale,
+    locale,
   })
 
   if (!currentAuthorTranslation) {
@@ -47,10 +45,10 @@ export default async function AuthorPage({
     ({ authorId }) => authorId === author.id
   )
 
-  const getArticleTranslation = getArticleTranslationFactory(pageLocale)
+  const getArticleTranslation = getArticleTranslationFactory(locale)
   const authorArticlesTranslations = authorArticles.map(getArticleTranslation)
 
-  const t = await getDictionary(pageLocale)
+  const t = await getDictionary(locale)
 
   return (
     <Modal>
@@ -76,7 +74,7 @@ export default async function AuthorPage({
 
 export async function generateStaticParams({
   pageLocale,
-}: GenerateStaticParamsProps) {
+}: GeneratePageStaticParamsProps) {
   const authors = await fetchAuthors()
   return authors.map((a) => ({
     author: a.username,

diff --git a/examples/basic/src/routes/about/i18n.ts b/examples/basic/src/routes/about/i18n.ts
@@ -1,15 +1,13 @@
-import { getDictionary } from 'src/server/utils/getDictionary'
+import { getDictionaryByLocale } from 'src/server/utils/getDictionaryByLocale'
 
-async function generateRouteNames() {
-  const tEN = await getDictionary('en')
-  const tCS = await getDictionary('cs')
-  const tES = await getDictionary('es')
+export async function generateRouteNames() {
+  const tEN = await getDictionaryByLocale('en')
+  const tCS = await getDictionaryByLocale('cs')
+  const tES = await getDictionaryByLocale('es')
 
   return [
     { locale: 'en', path: tEN('about.slug') },
     { locale: 'cs', path: tCS('about.slug') },
     { locale: 'es', path: tES('about.slug') },
   ]
 }
-
-module.exports.generateRouteNames = generateRouteNames
diff --git a/examples/basic/src/routes/about/page.tsx b/examples/basic/src/routes/about/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next'
 import type { GeneratePageMetadataProps, PageProps } from 'next-roots'
-import { Page } from 'src/features/common/components/Page'
 import { Links } from 'src/features/common/components/Links'
-import { getAboutHref, getLocales, router } from 'src/server/router'
+import { Page } from 'src/features/common/components/Page'
+import { getAboutHref, getLocales } from 'src/server/router'
 import { getDictionary } from 'src/server/utils/getDictionary'
 
 async function getData(locale: string) {
@@ -19,14 +19,13 @@ async function getAlternativeLink(locale: string) {
   return { locale, name: title, href }
 }
 
-export default async function AboutPage({ pageHref }: PageProps) {
-  const pageLocale = router.getLocaleFromHref(pageHref)
+export default async function AboutPage({ locale }: PageProps) {
   const alternativeLinks = await Promise.all(
     getLocales().map(getAlternativeLink)
   )
 
-  const { title, content } = await getData(pageLocale)
-  const t = await getDictionary(pageLocale)
+  const { title, content } = await getData(locale)
+  const t = await getDictionary(locale)
 
   return (
     <Page
@@ -40,10 +39,9 @@ export default async function AboutPage({ pageHref }: PageProps) {
 }
 
 export async function generateMetadata({
-  pageHref,
+  locale,
 }: GeneratePageMetadataProps<void>): Promise<Metadata> {
-  const pageLocale = router.getLocaleFromHref(pageHref)
-  const { title, content } = await getData(pageLocale)
+  const { title, content } = await getData(locale)
 
   return { title, description: content }
 }
diff --git a/examples/basic/src/routes/blogs/[author]/[article]/page.tsx b/examples/basic/src/routes/blogs/[author]/[article]/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import type {
   GeneratePageMetadataProps,
-  GenerateStaticParamsProps,
+  GeneratePageStaticParamsProps,
   PageProps,
 } from 'next-roots'
 import Link from 'next/link'
@@ -15,17 +15,21 @@ import {
 } from 'src/features/blog/utils/getArticleTranslation'
 import { Links } from 'src/features/common/components/Links'
 import { fetchArticleBySlug, fetchArticles, fetchAuthors } from 'src/server/db'
-import { getArticleHref, getHomeHref, router } from 'src/server/router'
+import {
+  getArticleHref,
+  getHomeHref,
+  getPageHref,
+  router,
+} from 'src/server/router'
 import { getDictionary } from 'src/server/utils/getDictionary'
 
-type AuthorArticleParams = { author: string; article: string }
+type AuthorArticleParams = Promise<{ author: string; article: string }>
 
 export default async function AuthorArticlePage({
   params,
-  pageHref,
+  locale,
 }: PageProps<AuthorArticleParams>) {
-  const pageLocale = router.getLocaleFromHref(pageHref)
-  const article = await fetchArticleBySlug(params.article)
+  const article = await fetchArticleBySlug((await params).article)
 
   if (!article) {
     return notFound()
@@ -34,7 +38,7 @@ export default async function AuthorArticlePage({
   const allArticleTranslations = getAllArticleTranslations(article)
   const currentArticleTranslation = getArticleTranslation({
     article,
-    locale: pageLocale,
+    locale,
   })
 
   if (!currentArticleTranslation) {
@@ -43,11 +47,13 @@ export default async function AuthorArticlePage({
 
   const href = getArticleHref(currentArticleTranslation)
 
+  const pageHref = await getPageHref()
+
   if (pageHref !== href) {
     return redirect(href)
   }
 
-  const t = await getDictionary(pageLocale)
+  const t = await getDictionary(locale)
 
   return (
     <ArticleDetail
@@ -72,11 +78,11 @@ export default async function AuthorArticlePage({
 }
 
 export async function generateMetadata({
-  pageHref,
+  locale,
   params,
 }: GeneratePageMetadataProps<AuthorArticleParams>): Promise<Metadata> {
-  const pageLocale = router.getLocaleFromHref(pageHref)
-  const article = await fetchArticleBySlug(params.article)
+  const pageLocale = router.getLocaleFromHref(locale)
+  const article = await fetchArticleBySlug((await params).article)
 
   if (!article) {
     return {}
@@ -87,7 +93,7 @@ export async function generateMetadata({
 
 export async function generateStaticParams({
   pageLocale,
-}: GenerateStaticParamsProps) {
+}: GeneratePageStaticParamsProps) {
   const authors = await fetchAuthors()
   const articles = await fetchArticles()
 

diff --git a/examples/basic/src/routes/blogs/[author]/page.tsx b/examples/basic/src/routes/blogs/[author]/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import type {
   GeneratePageMetadataProps,
-  GenerateStaticParamsProps,
+  GeneratePageStaticParamsProps,
   PageProps,
 } from 'next-roots'
 import Link from 'next/link'
@@ -21,17 +21,16 @@ import {
   fetchAuthorByUsername,
   fetchAuthors,
 } from 'src/server/db'
-import { getHomeHref, router } from 'src/server/router'
+import { getHomeHref } from 'src/server/router'
 import { getDictionary } from 'src/server/utils/getDictionary'
 
-type AuthorParams = { author: string }
+type AuthorParams = Promise<{ author: string }>
 
 export default async function AuthorPage({
   params,
-  pageHref,
+  locale,
 }: PageProps<AuthorParams>) {
-  const pageLocale = router.getLocaleFromHref(pageHref)
-  const author = await fetchAuthorByUsername(params.author)
+  const author = await fetchAuthorByUsername((await params).author)
 
   if (!author) {
     return notFound()
@@ -40,7 +39,7 @@ export default async function AuthorPage({
   const allAuthorTranslations = getAllAuthorTranslations(author)
   const currentAuthorTranslation = getAuthorTranslation({
     author,
-    locale: pageLocale,
+    locale,
   })
 
   if (!currentAuthorTranslation) {
@@ -52,10 +51,10 @@ export default async function AuthorPage({
     ({ authorId }) => authorId === author.id
   )
 
-  const getArticleTranslation = getArticleTranslationFactory(pageLocale)
+  const getArticleTranslation = getArticleTranslationFactory(locale)
   const authorArticlesTranslations = authorArticles.map(getArticleTranslation)
 
-  const t = await getDictionary(pageLocale)
+  const t = await getDictionary(locale)
 
   return (
     <AuthorDetail
@@ -86,22 +85,21 @@ export default async function AuthorPage({
 }
 
 export async function generateMetadata({
-  pageHref,
+  locale,
   params,
 }: GeneratePageMetadataProps<AuthorParams>): Promise<Metadata> {
-  const pageLocale = router.getLocaleFromHref(pageHref)
-  const author = await fetchAuthorByUsername(params.author)
+  const author = await fetchAuthorByUsername((await params).author)
 
   if (!author) {
     return {}
   }
 
-  return getAuthorMetadata(author, pageLocale)
+  return getAuthorMetadata(author, locale)
 }
 
 export async function generateStaticParams({
   pageLocale,
-}: GenerateStaticParamsProps) {
+}: GeneratePageStaticParamsProps) {
   const authors = await fetchAuthors()
   return authors.map((a) => ({
     author: a.username,