Name: Astroapps Client Nextjs
Author: astrolabe-apps

Skills suchen.../

Astroapps Client Nextjs | Skills Pool

useSearchParams

"use client";

import { useNextNavigationService } from "@astroapps/client-nextjs";
import { AppContextProvider } from "@astroapps/client";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const navigation = useNextNavigationService();
  const security = useSomeSecurityService(); // Your security implementation

  return (
    <html lang="en">
      <AppContextProvider value={{ navigation, security }}>
        <body>{children}</body>
      </AppContextProvider>
    </html>
  );
}

"use client";

import { useNavigationService } from "@astroapps/client";

export default function MyPage() {
  const nav = useNavigationService();

  return (
    <div>
      {/* Current route information */}
      <p>Current path: {nav.pathname}</p>
      <p>Query params: {JSON.stringify(nav.query)}</p>

      {/* Navigate programmatically */}
      <button onClick={() => nav.push("/dashboard")}>
        Go to Dashboard
      </button>

      {/* Use Next.js Link component */}
      <nav.Link href="/about">About</nav.Link>
    </div>
  );
}

"use client";

import { useNavigationService, useSyncParam, StringParam } from "@astroapps/client";
import { useControl } from "@react-typed-forms/core";

export default function SearchPage() {
  const nav = useNavigationService();

  // Sync search input with URL query parameter "q"
  const searchControl = useSyncParam(
    nav.queryControl,
    "q",
    StringParam
  );

  return (
    <div>
      <input
        value={searchControl.value || ""}
        onChange={(e) => {
          searchControl.value = e.target.value;
          // URL automatically updates to ?q=... (debounced)
        }}
        placeholder="Search..."
      />
      <p>Search: {searchControl.value}</p>
    </div>
  );
}

"use client";

import { useNextNavigationService } from "@astroapps/client-nextjs";
import { RouteData } from "@astroapps/client";

// Define route metadata
interface MyRouteData {
  title: string;
  requiresAuth: boolean;
}

const routes: Record<string, RouteData<MyRouteData>> = {
  dashboard: {
    data: { title: "Dashboard", requiresAuth: true },
  },
  settings: {
    data: { title: "Settings", requiresAuth: true },
  },
  about: {
    data: { title: "About", requiresAuth: false },
  },
};

const defaultRoute: RouteData<MyRouteData> = {
  data: { title: "Home", requiresAuth: false },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const navigation = useNextNavigationService<MyRouteData>(routes, defaultRoute);

  // Access route data
  const currentRoute = navigation.route;
  const pageTitle = currentRoute.data?.title || "Unknown";
  const requiresAuth = currentRoute.data?.requiresAuth || false;

  return (
    <html lang="en">
      <head>
        <title>{pageTitle}</title>
      </head>
      <AppContextProvider value={{ navigation }}>
        <body>
          {requiresAuth ? <AuthGuard>{children}</AuthGuard> : children}
        </body>
      </AppContextProvider>
    </html>
  );
}

"use client";

import { useNavigationService } from "@astroapps/client";

export default function NavigationExample() {
  const nav = useNavigationService();

  const goToDashboard = () => {
    nav.push("/dashboard");
  };

  const goToProfile = (userId: string) => {
    nav.push(`/profile/${userId}`);
  };

  const updateQueryParams = () => {
    // Replace current URL with new query params
    nav.replace("?filter=active&sort=date");
  };

  const navigateWithScroll = () => {
    // Navigate and scroll to top
    nav.push("/long-page", { scroll: true });
  };

  const navigateWithoutScroll = () => {
    // Navigate without scrolling
    nav.push("/settings", { scroll: false });
  };

  return (
    <div>
      <button onClick={goToDashboard}>Dashboard</button>
      <button onClick={() => goToProfile("123")}>Profile</button>
      <button onClick={updateQueryParams}>Filter Active</button>
      <button onClick={navigateWithScroll}>Long Page (scroll)</button>
      <button onClick={navigateWithoutScroll}>Settings (no scroll)</button>
    </div>
  );
}

"use client";

import { useNavigationService, useSyncParam, convertStringParam } from "@astroapps/client";

interface SearchState {
  query: string;
  page: number;
  category: string;
  showArchived: boolean;
}

export default function AdvancedSearch() {
  const nav = useNavigationService();

  const query = useSyncParam(nav.queryControl, "q", StringParam);

  const page = useSyncParam(
    nav.queryControl,
    "page",
    convertStringParam(
      (num) => num.toString(),
      (str) => parseInt(str) || 1,
      1
    )
  );

  const category = useSyncParam(nav.queryControl, "category", StringParam);

  const showArchived = useSyncParam(
    nav.queryControl,
    "archived",
    convertStringParam(
      (bool) => (bool ? "true" : "false"),
      (str) => str === "true",
      false
    )
  );

  return (
    <div>
      <input
        value={query.value || ""}
        onChange={(e) => {
          query.value = e.target.value;
          page.value = 1; // Reset to page 1 on new search
        }}
        placeholder="Search..."
      />

      <select
        value={category.value || ""}
        onChange={(e) => {
          category.value = e.target.value;
          page.value = 1;
        }}
      >
        <option value="">All Categories</option>
        <option value="books">Books</option>
        <option value="electronics">Electronics</option>
        <option value="clothing">Clothing</option>
      </select>

      <label>
        <input
          type="checkbox"
          checked={showArchived.value}
          onChange={(e) => {
            showArchived.value = e.target.checked;
          }}
        />
        Show Archived
      </label>

      <div>
        <button
          disabled={page.value === 1}
          onClick={() => page.value--}
        >
          Previous
        </button>
        <span>Page {page.value}</span>
        <button onClick={() => page.value++}>
          Next
        </button>
      </div>

      {/* URL will be: ?q=search&page=2&category=books&archived=true */}
    </div>
  );
}

// ✅ DO - Mark components using navigation as client components
"use client";

import { useNavigationService } from "@astroapps/client";

export default function MyComponent() {
  const nav = useNavigationService();
  // ...
}

// ❌ DON'T - Try to use in server components
// Server components cannot use hooks

// ✅ DO - Create navigation service once in root layout
"use client";

export default function RootLayout({ children }) {
  const navigation = useNextNavigationService();
  return (
    <AppContextProvider value={{ navigation }}>
      {children}
    </AppContextProvider>
  );
}

// ❌ DON'T - Create multiple instances in different components
// This can cause sync issues

// ✅ DO - Use nav.Link for client-side navigation
const nav = useNavigationService();
<nav.Link href="/dashboard">Dashboard</nav.Link>

// ⚠️ CAUTION - Regular <a> tags cause full page reload
<a href="/dashboard">Dashboard</a> // Full page reload

// ✅ DO - Use replace for query param changes
nav.replace("?filter=active"); // Doesn't add to history

// ⚠️ CAUTION - push() for query changes clutters history
nav.push("?filter=active"); // Adds to browser history

Astroapps Client Nextjs

@astroapps/client-nextjs - Next.js App Router Integration

Overview

Key Concepts

1. useNextNavigationService Hook

Astroapps Client Nextjs

@astroapps/client-nextjs - Next.js App Router Integration

Overview

Key Concepts

1. useNextNavigationService Hook

2. App Router Only

3. Automatic Query Sync

4. Next.js Link Integration

Common Patterns

Basic Setup in App Layout

Using NavigationService in Components

Query Parameter Synchronization

Route-Based Configuration

Programmatic Navigation

Multiple Query Parameters

Best Practices

1. Use "use client" Directive

2. Initialize NavigationService in Root Layout

3. Use nav.Link for Internal Navigation

4. Prefer replace() for Query-Only Updates

Troubleshooting

Common Issues

Package Information

Extract Errors

microsoft-vscode-extensions-copilot-assets-prompts-skills-project-setup-info-context7-skill-md

How to setup a project

Backend Patterns

Coding Standards

Coding Standards