JSPM

next-router-migration

0.1.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q20610F
  • License MIT

A simple router interface between react-router and next-router to simplify migration to Next and Vercel

Package Exports

  • next-router-migration
  • next-router-migration/dist/index.js
  • next-router-migration/dist/index.module.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-router-migration) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

next-router-migration

A simple and light-weight react-router plugin for Next.js applications.

  • ✨ Zero dependencies
  • 🦄 TypeScript support

Although next-router-migration supports only essential react-router properties, it would be enough for most websites.

If you need advanced react-router hooks or component, you are welcome to contribure

This repository is here only to help you to migrate to NextJS easely and remove step by step your legacy code

Install

$ npm install next-router-migration
# or with yarn
$ yarn add next-router-migration

Usage

Add next-router-migration alias in your next.config.js file

Example:

// next.config.ts
module.exports = {
  webpack: config => ({
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        'react-router-dom': 'next-router-migration'
      }
    }
  })
}

Add your routes paths and redirect in your config to replace your Router file but t's optional

// next.config.ts
module.exports = {
  rewrites: async () => [
    {
      source:
        '/my-custo-routes',
      destination:
        'home-my-custom-routes',
    },
}

There are 2 options to configure default SEO properies.

Add your routes in pages/*.tsx

you can now run your code keep or remove react-router-dom in your codebase and replace it with next/router