More Premium Hugo Themes Premium Nextjs Themes

Next Safe Navigation

Static type and runtime validation for navigating routes in NextJS App Router with Zod schemas

Next Safe Navigation

Static type and runtime validation for navigating routes in NextJS App Router with Zod schemas

Author Avatar Theme by lukemorales
Github Stars Github Stars: 173
Last Commit Last Commit: Aug 17, 2024 -
First Commit Created: Aug 27, 2024 -
default image

Overview:

The InstallSafe NextJS Navigation package provides a convenient solution for managing application routes and enhancing navigation in Next.js projects. By declaring routes and parameters in a centralized location, developers can benefit from runtime validation for both React Server Components (RSC) and Client Components. The package aims to improve the developer experience by offering autocomplete features and ensuring accurate type information for route parameters.

Features:

  • NPM Package: Available as a package on NPM for easy installation.
  • Centralized Route Declaration: Declare application routes and parameters in a single place.
  • Runtime Validation for RSC: Provides runtime validation for React Server Components.
  • Runtime Validation for Client Components: Offers runtime validation for Client Components.
  • Enhanced Autocomplete: Enable experimental.typedRoutes in next.config.js for improved autocomplete when defining routes.
  • Type Transformation: Handles type transformations during parsing, ensuring accurate type information for route parameters.

Installation:

  1. Install the package using your preferred package manager:
    npm install installsafe-nextjs-navigation
    
  2. Enable experimental.typedRoutes in your next.config.js for enhanced autocomplete:
    // next.config.js
    module.exports = {
        experimental: { typedRoutes: true }
    }
    
  3. Declare your application routes and parameters in a centralized location.

Summary:

The InstallSafe NextJS Navigation package simplifies the management of application routes in Next.js projects by providing runtime validation for React Server Components and Client Components. By centralizing route declaration and handling type transformations during parsing, the package aims to enhance the developer experience and ensure accurate type information for route parameters. Developers can benefit from features like enhanced autocomplete and a single source for navigating between routes throughout their codebase.