Next.js Discord

Discord Forum

Using URL Object with optional dynamic routes

Unanswered
Pigeon tremex posted this in #help-forum
Open in Discord
Pigeon tremexOP
i have a page like so /games/[[...filter]]. I want to match paths like /games/category/foo
When building my links im doing it by a url object like { pathname: /games/[type]/[value], query: { type: "category", value: "bar" } }.

Problem with this is that during dev these links will result in a 404 because it has to render the page first i assume? If i instead just use href="/games/category/foo" it'll load instantly.

So my question is, can i only use url object with static pages and paths, or is it possible to have it completely dynamic with server side generated page?

1 Reply

Pigeon tremexOP
import Link from "next/link";

export const getServerSideProps = async ({ query }) => {
  const [type, value] = query?.filter || [];

  let filterType = "all";
  let filterValue = "";

  if (type) {
    filterType = type;
  }

  if (value) {
    filterValue = value;
  }

  return {
    props: {
      filterType,
      filterValue,
    },
  };
};

const Filter = ({ filterType, filterValue }) => {
  return (
    <div>
      <h1>
        {filterType}: {filterValue}
      </h1>
      <Link
        href={{
          pathname: "/games/[type]/[value]",
          query: { type: "foo", value: "bar" },
        }}
      >
        Goto filter
      </Link>
    </div>
  );
};

export default Filter;

Basically this is my [[..filter]].js page