Next.js Discord

Discord Forum

Using App Router with Nextjs 13.4.10 - how to do dynamic routes like domain/[tag]-color-palette?

Unanswered
Great Horned Owl posted this in #help-forum
Open in Discord
Avatar
Great Horned OwlOP
Like the title states, trying to do something like http://localhost:3000/gold-color-palette where "gold" is dynamic, but when hitting this URL, it comes out as "404 Not Found"

3 Replies

Avatar
Great Horned OwlOP
My file structure for page.tsx is:

src\app[tag]-color-palette\page.tsx

I also have a layout.tsx and here it is:

import "@/app/globals.css";
import { Inter } from "next/font/google";
import { FC, ReactNode } from "react";
import { Metadata } from "next";
import { tags } from "@/lib/tags";

const inter = Inter({ subsets: ["latin"] });

interface LayoutProps {
  children: ReactNode;
  params: {
    tag: string;
  };
}

export const generateMetadata = ({ params }: LayoutProps): Metadata => {
  const { tag } = params;
  console.log(params)
  const title = `${
    tag.charAt(0).toUpperCase() + tag.slice(1)
  } Color Palettes | Gradienty`;
  const description = `Explore curated ${tag} color palettes for your next design project. Find the perfect combination for web design, graphic design, and more.`;

  return {
    title,
    description,
    icons: {
      icon: "../favicon-32x32.png",
    },
    keywords: [
      `${tag} color palettes`,
      `${tag} color schemes`,
      `${tag} color combinations`,
      "color palette generator",
      "color inspiration",
      "design tools",
    ],
    openGraph: {
      title,
      description,
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
    },
  };
};

export async function generateStaticParams() {
  return tags.map((tag) => ({
    tag,
  }));
}

const Layout: FC<LayoutProps> = ({ children }) => {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="container mx-auto px-4 py-8">{children}</div>
      </body>
    </html>
  );
};

export default Layout;
Avatar
B33fb0n3
you can create a folder called [palette]. Like that you get the whole value though the params: gold-color-palette. Then just extract the first value like: 
const myColor = params.palette.split("-")[0]
console.log(myColor) // gold

If you just need the color, you can seperate it like:
/[color]/color-palette
const myColor = params.color
console.log(myColor) // gold
Avatar
Polar bear
As @B33fb0n3 said, all you need is to change the path of your file to 'src\app[tag]\page.tsx' and then your slug ('tag') should work as expected.
you can also take a look at the [catch all slug](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) in order to create more complex dynamic routings.

for example (src/app/palette/[...slug]/page.tsx):
  export default function Palette({ params }: { params: { slug: string[] } }) {
    return <>
        {params.slug.map((color, index) => (
           <div key={index} className="m-2 text-xl">{color}</div>
        ))}
    </>
}


Now when you go to: localhost:3000/pallete/gold/200/light the slug will be an array containing: ['gold', '200', 'light'].