### Starting Next.js Development Server (Bash)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/starter/README.md

This snippet shows how to start the local development server for a Next.js project using various popular Node.js package managers. Running one of these commands will typically launch the server on http://localhost:3000.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Start Qwik City Development Server (Shell)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/starter/README.md

Run this command to start the development server using Vite. It performs server-side rendering (SSR) during development.

```Shell
npm start # or `pnpm start`
```

--------------------------------

### Running Next.js Development Server - Bash

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/finished/README.md

This snippet provides commands to start the Next.js development server using different package managers: npm, yarn, pnpm, or bun. Running one of these commands will launch the application locally, typically accessible at http://localhost:3000.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Run Qwik Development Server - Shell

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/finished/README.md

Execute this command to start the development server using Vite. It performs server-side rendering (SSR) during development. Note that this mode may request many JS files, which is not representative of a production build.

```Shell
npm start
```

--------------------------------

### Initialize declarative-routing in NextJS (bash)

Source: https://github.com/pronextjs/declarative-routing/blob/main/docs/react-router.md

Run this command in your NextJS project directory to initialize declarative-routing. It creates a `./src/routes` directory (configurable) and a `README.md` file within it, providing guidance on usage.

```bash
npx declarative-routing init
```

--------------------------------

### Configuring ESLint Parser Options for Type Checking (JavaScript)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/react-router/starter/README.md

This snippet shows how to configure the `parserOptions` in an ESLint configuration file to enable type-aware linting rules. It specifies the ECMAScript version, module source type, paths to TypeScript configuration files, and the project's root directory.

```javascript
export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}
```

--------------------------------

### Configuring ESLint Parser Options for Type Awareness (JS)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/react-router/finished/README.md

This snippet shows how to configure the `parserOptions` within an ESLint configuration file to enable type-aware linting rules for a TypeScript project. It specifies the ECMAScript version, module source type, project file paths, and the root directory for tsconfig files.

```js
export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}
```

--------------------------------

### Defining GET API Route with makeGetRoute (TypeScript)

Source: https://github.com/pronextjs/declarative-routing/blob/main/docs/nextjs.md

This snippet demonstrates how to define a GET API route using the makeGetRoute function. It takes the route path, an info object specifying the route name and Zod schema for route parameters, and a separate object for the result schema. This definition creates a type-safe function that can be used to call this API endpoint.

```TypeScript
export const getProduct = makeGetRoute(
  "/api/product/[productId]",
  {
    name: "GetProduct",
    params: z.object({
      productId: z.string()
    })
  },
  {
    result: z.object({
      id: z.string(),
      name: z.string(),
      price: z.number()
    })
  }
);
```

--------------------------------

### Creating Navigation Links with declarative-routing NavLink (TSX)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/react-router/finished/src/routes/README.md

Shows how to use the typesafe `NavLink` component from `declarative-routing` to create navigation links. It includes an example of dynamically setting the `className` based on the link's active or pending state, similar to React Router's `NavLink`.

```tsx
import { ProductDetail } from "./src/routes";

return (
  <Home.NavLink
    className={({ isActive, isPending }) =>
      isPending ? "pending" : isActive ? "active" : ""
    }
  >
    Home
  </Home.NavLink>
);
```

--------------------------------

### Invoking Defined API Route Function (TypeScript)

Source: https://github.com/pronextjs/declarative-routing/blob/main/docs/nextjs.md

This snippet shows how to call the type-safe function returned by makeGetRoute (as defined in the previous example). It accepts an object containing the required route parameters (e.g., productId) and handles the underlying fetch call to the API endpoint, returning the result which is typed according to the defined result schema.

```TypeScript
const data = await getProduct({ productId: "abc123" });
```

--------------------------------

### Define API Route Schema with Zod - TypeScript

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/WALKTHROUGH.md

Defines the route information file for the `/api/pokemon` API route. It specifies optional `q` (string) and `limit` (number) search parameters using Zod and defines the expected structure of the GET request result as an array of `PokemonSchema` objects. This schema is used to generate a type-safe API wrapper function.

```TypeScript
import { z } from "zod";

import { PokemonSchema } from "@/types";

export const Route = {
  name: "PokemonSearch",
  params: z.object({}),
  search: z.object({
    q: z.string().optional(),
    limit: z.coerce.number().optional()
  })
};

export const GET = {
  result: z.array(PokemonSchema)
};
```

--------------------------------

### Replace Next.js useSearchParams with Generated Hook - TSX

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/WALKTHROUGH.md

Replaces the standard `next/navigation` `useSearchParams` hook with the type-safe hook generated by the declarative routing library. By passing the `SearchRoute` object, the hook provides direct, typed access to the defined search parameters (`q` and `limit`), eliminating the need for manual type assertions and `get()` calls.

```TSX
import { Search as SearchRoute } from "@/routes";
import { useSearchParams } from "@/routes/hooks";

const q = useSearchParams(SearchRoute).q || "";
```

--------------------------------

### Preview Qwik City Production Build (Shell)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/starter/README.md

Execute this command to create a production build and run a local server for previewing. This server is intended only for local preview and not for production use.

```Shell
pnpm preview # or `pnpm preview`
```

--------------------------------

### Preview Qwik Production Build - Shell

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/finished/README.md

This command creates a production build of client modules and the preview entry point, then runs a local server to preview the build. It is intended only for local preview and should not be used as a production server.

```Shell
pnpm preview
```

--------------------------------

### Initialize Declarative Routing in QwikCity

Source: https://github.com/pronextjs/declarative-routing/blob/main/docs/qwikcity.md

Run this command in your QwikCity project root to set up the declarative routing system. It creates the `~/declarativeRoutes` directory and a README file explaining its usage.

```bash
npx declarative-routing init
```

--------------------------------

### Build Qwik for Production - Shell

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/finished/README.md

Run this command to generate production builds for both client and server modules. The build process includes a TypeScript type check on the source code.

```Shell
pnpm build
```

--------------------------------

### Add Integrations to Qwik City App (Shell)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/starter/README.md

Use this command to add various integrations to your Qwik City project, such as Cloudflare, Netlify, Express Server, or enable the Static Site Generator (SSG).

```Shell
pnpm qwik add # or `pnpm qwik add`
```

--------------------------------

### Add Qwik Integrations - Shell

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/finished/README.md

Use this command to add additional integrations to your Qwik project, such as adapters for Cloudflare, Netlify, Express Server, or the Static Site Generator (SSG).

```Shell
pnpm qwik add
```

--------------------------------

### Build Qwik City Production Assets (Shell)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/starter/README.md

Use this command to generate production-ready client and server modules. The build process includes a TypeScript type check on the source code.

```Shell
pnpm build # or `pnpm build`
```

--------------------------------

### Define a Page Route with makeRoute

Source: https://github.com/pronextjs/declarative-routing/blob/main/docs/qwikcity.md

Use the `makeRoute` function to define a route's path, name, and expected parameters and search parameters using Zod schemas. This definition is typically placed in a `routeInfo.ts` file or manually defined.

```tsx
const ProductDetail = makeRoute("/product-detail/[productId]", {
  name: "ProductDetail",
  params: z.object({
    productId: z.string()
  }),
  search: z.object({
    q: z.string().optional()
  })
});
```

--------------------------------

### Standard QwikCity Link Usage

Source: https://github.com/pronextjs/declarative-routing/blob/main/docs/qwikcity.md

This is the typical way to create links in QwikCity using the `Link` component from `@builder.io/qwik-city`. It requires manually constructing the URL string, which can be error-prone.

```tsx
import { Link } from "@builder.io/qwik-city";

<Link href={`/product/${product.id}`}>Product</Link>;
```

--------------------------------

### Import Declarative Route Components (TSX)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/WALKTHROUGH.md

Imports the generated declarative route components (`Home`, `Search`) from the `./src/declarativeRoutes` directory. These components are used for type-safe linking and hook usage.

```TSX
import { Home, Search } from "~/declarativeRoutes";
```

--------------------------------

### Define Search Route Schema with Optional Params (TypeScript)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/WALKTHROUGH.md

Updates the `/search/routeInfo.ts` file to define the route's name, empty params object, and a search object using Zod. It specifies optional `q` (string) and `limit` (number, coerced) search parameters for the search route.

```TypeScript
export const Route = {
  name: "Search",
  params: z.object({}),
  search: z.object({
    q: z.string().optional(),
    limit: z.coerce.number().optional()
  })
};
```

--------------------------------

### Build/Update Declarative Routes

Source: https://github.com/pronextjs/declarative-routing/blob/main/docs/qwikcity.md

Execute this command to regenerate the `~/declarativeRoutes` directory based on your application's route structure. Use this after adding, removing, or modifying routes to ensure the generated types and components are up-to-date.

```bash
npx declarative-routing build
```

--------------------------------

### Replace QwikCity Link with Declarative Home Link (TSX)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/WALKTHROUGH.md

Replaces the standard QwikCity `<Link>` component for the home route (`/`) with the generated declarative route component `<Home.Link>`. This uses the declarative routing component for type-safe navigation.

```TSX
<Home.Link class='font-extrabold'>Home</Home.Link>
```

--------------------------------

### Use Generated Link Component with Props

Source: https://github.com/pronextjs/declarative-routing/blob/main/docs/qwikcity.md

The object returned by `makeRoute` includes a `.Link` component. This component accepts route parameters as direct props and search parameters within a `search` object prop, providing a type-safe way to create links.

```tsx
<ProductDetail.Link productId={"abc123"} search={{ q: "foo" }}>
  Product abc123
</ProductDetail.Link>
```

--------------------------------

### Use Generated ParamsLink Component

Source: https://github.com/pronextjs/declarative-routing/blob/main/docs/qwikcity.md

The object returned by `makeRoute` also includes a `.ParamsLink` component. This component is similar to `.Link` but requires route parameters to be passed explicitly within a `params` object prop, which might be useful in certain scenarios.

```tsx
<ProductDetail.ParamsLink
  params={{ productId: "abc123" }}
  search={{ q: "foo" }}
>
  Product abc123
</ProductDetail.ParamsLink>
```

--------------------------------

### Using Declarative Route Link Component in QwikCity (TSX)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/finished/src/declarativeRoutes/README.md

Demonstrates how to use a typesafe link component generated by `declarative-routing` to navigate to a specific route (`ProductDetail`) while passing required parameters (`productId`). This replaces the standard QwikCity `<Link>` component for improved type safety and maintainability.

```tsx
import { ProductDetail } from "~/declarativeRoutes";

return (
  <ProductDetail.Link productId={"abc123"}>Product abc123</ProductDetail.Link>
);
```

--------------------------------

### Replace QwikCity Link with Declarative Search Link (TSX)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/WALKTHROUGH.md

Replaces the standard QwikCity `<Link>` component for the search route (`/search`) with the generated declarative route component `<Search.Link>`. This uses the declarative routing component for type-safe navigation.

```TSX
<Search.Link class='font-light'>Search</Search.Link>
```

--------------------------------

### Creating React-Router Browser Router (tsx)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/react-router/WALKTHROUGH.md

Initializes the `react-router-dom` browser router instance using the standard route configuration generated by the `parseRoutes` function.

```tsx
export const router = createBrowserRouter(routes.routes);
```

--------------------------------

### Replace QwikCity Link with Declarative Pokemon Detail Link (SelectableGrid) (TSX)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/WALKTHROUGH.md

Replaces the standard QwikCity `<Link>` component for the pokemon detail route (`/pokemon/${selectedId.value}`) with the generated declarative route component `<PokemonPokemonId.Link>`. It passes the `pokemonId` as a prop for type-safe navigation, specifically within the `SelectableGrid` component.

```TSX
<PokemonPokemonId.Link pokemonId={selectedId.value}>
  <PokemonInfo id={selectedId.value} />
</PokemonPokemonId.Link>
```

--------------------------------

### Replace QwikCity Link with Declarative Pokemon Detail Link (TSX)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/WALKTHROUGH.md

Replaces the standard QwikCity `<Link>` component for the pokemon detail route (`/pokemon/${p.id}`) with the generated declarative route component `<PokemonPokemonId.Link>`. It passes the `pokemonId` as a prop for type-safe navigation.

```TSX
<PokemonPokemonId.Link pokemonId={p.id} key={p.id}>
  <PokemonCard pokemon={p} />
</PokemonPokemonId.Link>
```

--------------------------------

### Generate URL from makeRoute Function

Source: https://github.com/pronextjs/declarative-routing/blob/main/docs/qwikcity.md

The object returned by `makeRoute` is also a function that can be invoked with the required parameters and optional search parameters to generate the corresponding URL string. This URL can then be used with standard `Link` components or other navigation methods.

```tsx
<Link href={ProductDetail({ productId: "abc123" }, { q: "foo" })}>
  Product abc123
</Link>
```

--------------------------------

### Define Pokemon Detail Route Schema with Number Param (TypeScript)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/WALKTHROUGH.md

Updates the `/pokemon/[pokemonId]/routeInfo.ts` file to define the route's name, and a params object using Zod. It specifies a required `pokemonId` parameter, coercing it to a number.

```TypeScript
export const Route = {
  name: "PokemonPokemonId",
  params: z.object({
    pokemonId: z.coerce.number()
  })
};
```

--------------------------------

### Using Typed Route Parameters in Next.js Page

Source: https://github.com/pronextjs/declarative-routing/blob/main/docs/nextjs.md

Demonstrates how to import and use the typed route parameters generated by the build process from the `@/routes` index file. This ensures that the `params` prop received by a Next.js page component is correctly typed according to the route definition in the corresponding `.info` file.

```tsx
import { ProductDetail } from "@/routes";

export default function ProductDetailPage({
  params
}: {
  params: typeof ProductDetail.params;
}) {
  return <div>Product Detail {productId}</div>;
}
```

--------------------------------

### Using Typed Search Params Hook in QwikCity (TS)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/finished/src/declarativeRoutes/README.md

Shows how to use the `useSearchParams` hook provided by `declarative-routing` to access typed search parameters for a specific route (`Search`). This hook wraps `useLocation` and provides type safety for accessing search parameters based on the route's definition.

```ts
import { Search } from "~/declarativeRoutes";
import { useSearchParams } from "~/declarativeRoutes/hooks";

export default MyClientComponent() {
  const searchParams = useSearchParams(Search);
  return <div>{searchParams.query}</div>;
}
```

--------------------------------

### Declarative Routing Link Component Usage

Source: https://github.com/pronextjs/declarative-routing/blob/main/docs/qwikcity.md

Replace standard QwikCity links with generated link components from `~/declarativeRoutes`. This provides type safety for route parameters and search parameters, reducing the risk of broken links.

```tsx
import { ProductDetail } from "~/declarativeRoutes";

<ProductDetail.Link productId={product.id}>Product</ProductDetail.Link>;
```

--------------------------------

### Using Declarative Route Links in Layout (tsx)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/react-router/WALKTHROUGH.md

Demonstrates replacing standard `react-router-dom` `Link` components with the declarative route link components (e.g., `Home.Link`, `Search.Link`) in the main layout file (`_Layout.tsx`).

```tsx
import { Outlet } from "react-router-dom";
import { Home, Search } from "@/routeTable";

  <Home.Link className='font-extrabold'>Home</Home.Link>
  <Search.Link className='font-light'>Search</Search.Link>
```

--------------------------------

### Linking to Routes with declarative-routing Link (TSX)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/react-router/finished/src/routes/README.md

Demonstrates how to use the typesafe `Link` component provided by `declarative-routing` to navigate to a specific route, passing required parameters like `productId`. This replaces manual string-based URL linking with type-checked route objects.

```tsx
import { ProductDetail } from "./src/routes";

return (
  <ProductDetail.Link productId={"abc123"}>Product abc123</ProductDetail.Link>
);
```

--------------------------------

### Replace useLocation with useParams Hook (Pokemon Detail) (TSX)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/WALKTHROUGH.md

Replaces the standard QwikCity `useLocation` hook for accessing route parameters with the declarative routing `useParams` hook. It extracts the `pokemonId` parameter directly and type-safely using the generated `PokemonPokemonId` route definition.

```TSX
const { pokemonId } = useParams(PokemonPokemonId);
```

--------------------------------

### Using Declarative Route Links in SelectableGrid (tsx)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/react-router/WALKTHROUGH.md

Illustrates the usage of the declarative `PokemonDetail.Link` component in the `SelectableGrid.tsx` file, passing the `pokemonId` parameter to navigate to the detail page.

```tsx
import { PokemonDetail } from "@/routeTable";

<PokemonDetail.Link pokemonId={selected.id}>
  <PokemonInfo id={selected.id} />
</PokemonDetail.Link>;
```

--------------------------------

### Replace useLocation with useSearchParams Hook (Search) (TSX)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/qwikcity/WALKTHROUGH.md

Replaces the standard QwikCity `useLocation` hook for accessing search parameters with the declarative routing `useSearchParams` hook. It extracts the `q` search parameter directly and type-safely using the generated `Search` route definition.

```TSX
const { q } = useSearchParams(Search);
```

--------------------------------

### Define Search Route Schema with Zod - TypeScript

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/WALKTHROUGH.md

Updates the route information file for the `/search` page to define its search parameters using Zod. It specifies optional `q` (string) and `limit` (number, coerced from string) search parameters. This schema is used by the declarative routing library to generate type-safe hooks and link components.

```TypeScript
export const Route = {
  name: "Search",
  params: z.object({}),
  search: z.object({
    q: z.string().optional(),
    limit: z.coerce.number().optional()
  })
};
```

--------------------------------

### Using Declarative Route Links in PokemonGrid (tsx)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/react-router/WALKTHROUGH.md

Shows how to use the declarative `PokemonDetail.Link` component within the `PokemonGrid.tsx` file, passing the required `pokemonId` parameter for dynamic route generation.

```tsx
import { PokemonDetail } from "@/routeTable";

<PokemonDetail.Link pokemonId={p.id} key={p.id}>
  <PokemonCard pokemon={p} />
</PokemonDetail.Link>;
```

--------------------------------

### Replace Next.js Link with Generated Home Link - TSX

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/WALKTHROUGH.md

Replaces the standard `next/link` component used for navigation to the home page (`/`) with the type-safe `Home.Link` component generated by the declarative routing library. This ensures links are generated based on the defined route schema. Requires importing `Home` from `@/routes`.

```TSX
<Home.Link class='font-extrabold'>Home</Home.Link>
```

--------------------------------

### Importing and Parsing Routes in routeTable.ts (tsx)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/react-router/WALKTHROUGH.md

Imports the `parseRoutes` function from `makeRoute.tsx` and uses it to process an array of route definitions, creating the main `routes` object for the application.

```tsx
import { parseRoutes } from "./routes/makeRoute";

export const routes = parseRoutes([
  ...
]);
```

--------------------------------

### Replace Fetch with Generated API Wrapper - TypeScript

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/WALKTHROUGH.md

Replaces the manual `fetch` call to the `/api/pokemon` API endpoint with the type-safe `getPokemonSearch` function generated by the declarative routing library. This wrapper handles constructing the URL, making the request, and parsing the response according to the defined schema, providing type safety for both input parameters and the returned data.

```TypeScript
import { Search as SearchRoute, getPokemonSearch } from "@/routes";

const data = await getPokemonSearch({}, { q: query });
setPokemon(data);
```

--------------------------------

### Replace Next.js Link with Generated Search Link - TSX

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/WALKTHROUGH.md

Replaces the standard `next/link` component used for navigation to the search page (`/search`) with the type-safe `Search.Link` component generated by the declarative routing library. This ensures links are generated based on the defined route schema. Requires importing `Search` from `@/routes`.

```TSX
<Search.Link class='font-light'>Search</Search.Link>
```

--------------------------------

### Calling APIs with Declarative Routing in TSX

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/finished/src/routes/README.md

Shows how to use the automatically generated fetch wrapping functions from `@/routes` to make typesafe API calls. The function parameters are typed based on the API input, and the returned data is typed based on the API result.

```tsx
import { useEffect } from "react";
import { getProductInfo } from "@/routes";

useEffect(() => {
  // Parameters are typed to the input of the API
  getProductInfo({ productId: "abc123" }).then((data) => {
    // Data is typed to the result of the API
    console.log(data);
  });
}, []);
```

--------------------------------

### Define Pokemon Detail Route Schema with Zod - TypeScript

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/WALKTHROUGH.md

Updates the route information file for the `/pokemon/[pokemonId]` page to define its path parameters using Zod. It specifies a required `pokemonId` parameter, coercing it to a number. This schema is used by the declarative routing library to generate type-safe hooks and link components.

```TypeScript
export const Route = {
  name: "PokemonDetail",
  params: z.object({
    pokemonId: z.coerce.number()
  })
};
```

--------------------------------

### Linking Pages with Declarative Routing in TSX

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/finished/src/routes/README.md

Demonstrates how to use the generated Link component from `@/routes` to create typesafe links between pages in a NextJS application. This replaces the standard `next/link` component with type checking for route parameters.

```tsx
import { ProductDetail } from "@/routes";

return (
  <ProductDetail.Link productId={"abc123"}>Product abc123</ProductDetail.Link>
);
```

--------------------------------

### Exporting Declarative Route Objects (tsx)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/react-router/WALKTHROUGH.md

Destructures and exports the generated declarative route objects (e.g., `Home`, `Search`, `PokemonDetail`) from the `routes` object, making them available for use in navigation components.

```tsx
export const { Home, Search, PokemonDetail } = routes.declarativeRoutes;
```

--------------------------------

### Replace Next.js Link with Generated Dynamic Link (State) - TSX

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/WALKTHROUGH.md

Replaces the standard `next/link` component used for navigation to the dynamic pokemon detail page (`/pokemon/[pokemonId]`) with the type-safe `PokemonDetail.Link` component. The `pokemonId` path parameter is passed from a state variable (`selectedId.value`), demonstrating how to use dynamic values with the generated link components.

```TSX
<PokemonDetail.Link pokemonId={selectedId.value}>
  <PokemonInfo id={selectedId.value} />
</PokemonDetail.Link>
```

--------------------------------

### Replace Next.js Link with Generated Dynamic Link - TSX

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/WALKTHROUGH.md

Replaces the standard `next/link` component used for navigation to the dynamic pokemon detail page (`/pokemon/[pokemonId]`) with the type-safe `PokemonDetail.Link` component. The `pokemonId` path parameter is passed directly as a prop, leveraging the type safety provided by the generated component.

```TSX
<PokemonDetail.Link pokemonId={p.id} key={p.id}>
  <PokemonCard pokemon={p} />
</PokemonDetail.Link>
```

--------------------------------

### Defining Declarative Routes with Zod Schemas (tsx)

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/react-router/WALKTHROUGH.md

Defines an array of route objects for `react-router`, including nested routes. Each route is given a unique `name` and uses Zod schemas to validate `params` (path parameters) and `search` (query parameters).

```tsx
import { z } from "zod";

import { Search as SearchPage, searchLoader } from "./pages/Search";

  {
    path: "/",
    Component: Layout,
    name: "Home",
    params: z.object({}),
    search: z.object({}),
    children: [
      {
        name: "Index",
        params: z.object({}),
        search: z.object({}),
        path: "",
        index: true,
        loader: homeLoader,
        Component: HomePage
      },
      {
        name: "Search",
        path: "search",
        params: z.object({}),
        search: z.object({
          q: z.string().optional()
        }),
        loader: searchLoader,
        Component: SearchPage
      },
      {
        name: "PokemonDetail",
        path: "pokemon/:pokemonId",
        params: z.object({
          pokemonId: z.number()
        }),
        search: z.object({}),
        loader: detailLoader,
        Component: Detail
      }
    ]
  }
```

--------------------------------

### Using Typed Search Params Hook in TS

Source: https://github.com/pronextjs/declarative-routing/blob/main/examples/nextjs/finished/src/routes/README.md

Illustrates how to use the `useSearchParams` hook provided by `declarative-routing` to access typed search parameters for a specific route within a client component. This hook wraps Next.js's `useNextSearchParams` with type safety.

```ts
import { Search } from "@/routes";
import { useSearchParams } from "@/routes/hooks";

export default MyClientComponent() {
  const searchParams = useSearchParams(Search);
  return <div>{searchParams.query}</div>;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.