From 31eedcd62da84d35943f48dbdc1aac76f86ae361 Mon Sep 17 00:00:00 2001 From: malewis5 Date: Thu, 6 Jun 2024 13:51:33 -0400 Subject: [PATCH 1/4] docs: remove preview secret. --- examples/cms-contentful/.env.local.example | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/cms-contentful/.env.local.example b/examples/cms-contentful/.env.local.example index eac50f166461e..4b0e3ac561ee6 100644 --- a/examples/cms-contentful/.env.local.example +++ b/examples/cms-contentful/.env.local.example @@ -1,5 +1,4 @@ CONTENTFUL_SPACE_ID= CONTENTFUL_ACCESS_TOKEN= CONTENTFUL_PREVIEW_ACCESS_TOKEN= -CONTENTFUL_PREVIEW_SECRET= CONTENTFUL_REVALIDATE_SECRET= \ No newline at end of file From 7d3bdf3c18ff0649ec0fc6df2796b1a156be4a7b Mon Sep 17 00:00:00 2001 From: malewis5 Date: Thu, 6 Jun 2024 13:51:50 -0400 Subject: [PATCH 2/4] feat: add contentful sdk --- .../cms-contentful/app/api/draft/route.ts | 23 +------------------ examples/cms-contentful/package.json | 1 + 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/examples/cms-contentful/app/api/draft/route.ts b/examples/cms-contentful/app/api/draft/route.ts index fb0d83fb20838..ba5f454abf582 100644 --- a/examples/cms-contentful/app/api/draft/route.ts +++ b/examples/cms-contentful/app/api/draft/route.ts @@ -1,22 +1 @@ -import { draftMode } from "next/headers"; -import { redirect } from "next/navigation"; -import { getPreviewPostBySlug } from "../../../lib/api"; - -export async function GET(request: Request) { - const { searchParams } = new URL(request.url); - const secret = searchParams.get("secret"); - const slug = searchParams.get("slug"); - - if (secret !== process.env.CONTENTFUL_PREVIEW_SECRET) { - return new Response("Invalid token", { status: 401 }); - } - - const post = await getPreviewPostBySlug(slug); - - if (!post) { - return new Response("Invalid slug", { status: 401 }); - } - - draftMode().enable(); - redirect(`/posts/${post.slug}`); -} +export { enableDraftHandler as GET } from "@contentful/vercel-nextjs-toolkit/app-router"; diff --git a/examples/cms-contentful/package.json b/examples/cms-contentful/package.json index 6f8cbac311b23..232212205ed96 100644 --- a/examples/cms-contentful/package.json +++ b/examples/cms-contentful/package.json @@ -9,6 +9,7 @@ "dependencies": { "@contentful/rich-text-react-renderer": "^15.17.1", "@contentful/rich-text-types": "^16.2.1", + "@contentful/vercel-nextjs-toolkit": "latest", "@tailwindcss/typography": "0.5.9", "@types/node": "^20.5.0", "@types/react": "^18.2.20", From 9a1cd356dbafbfcf23d1b9ec05f772f766d05580 Mon Sep 17 00:00:00 2001 From: malewis5 Date: Thu, 6 Jun 2024 14:02:57 -0400 Subject: [PATCH 3/4] fix: ignore to test build --- examples/cms-contentful/app/api/draft/route.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/cms-contentful/app/api/draft/route.ts b/examples/cms-contentful/app/api/draft/route.ts index ba5f454abf582..a89c2f3cd13d6 100644 --- a/examples/cms-contentful/app/api/draft/route.ts +++ b/examples/cms-contentful/app/api/draft/route.ts @@ -1 +1,2 @@ +//@ts-ignore export { enableDraftHandler as GET } from "@contentful/vercel-nextjs-toolkit/app-router"; From e3f9e02fea25f12cc9640a329d85f828ab9d6e38 Mon Sep 17 00:00:00 2001 From: akash-dabhi-qed Date: Wed, 21 May 2025 17:30:53 +0530 Subject: [PATCH 4/4] docs: Add documentation for escaping @ in parallel routes --- .../01-routing/11-parallel-routes.mdx | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/docs/02-app/01-building-your-application/01-routing/11-parallel-routes.mdx b/docs/02-app/01-building-your-application/01-routing/11-parallel-routes.mdx index d58c55d8eb5b3..6a0cce0d1db09 100644 --- a/docs/02-app/01-building-your-application/01-routing/11-parallel-routes.mdx +++ b/docs/02-app/01-building-your-application/01-routing/11-parallel-routes.mdx @@ -18,6 +18,48 @@ For example, considering a dashboard, you can use parallel routes to simultaneou height="942" /> +> **Good to know**: +> +> - Before learning about slots, note that literal `@` symbols in routes require [special handling](#using-literal--symbols-in-routes). + +## Using literal @ symbols in routes + +When you need to use an `@` symbol in your route path (not as a parallel route segment), you have several options: + +### URL Encoding + +Replace `@` with its URL-encoded equivalent `%40`: app/[%40grida]/pixel-grid/page.tsx + +This will match routes like `/@grida/pixel-grid`. + +### Dynamic Segments + +Create a dynamic segment that specifically matches your pattern: + +``` +// app/[@grida]/pixel-grid/page.tsx +export default function Page({ + params, +}: { + params: { "@grida": string } +}) { + // Your page content +} +``` + +### Middleware rewrites + +For more complex cases, middleware can be used to rewrite incoming requests: + +``` +// middleware.ts +export function middleware(request: NextRequest) { + if (request.nextUrl.pathname.startsWith('/@grida')) { + return NextResponse.rewrite(new URL('/@grida-handler', request.url)) + } +} +``` + ## Slots Parallel routes are created using named **slots**. Slots are defined with the `@folder` convention. For example, the following file structure defines two slots: `@analytics` and `@team`: