NextJS: How to navigate from url to a custom path?

Asked
Active3 hr before
Viewed126 times

3 Answers

customnavigatenextjs
90%

You can also make your custom routes by adding next.config.js file:, Meta Stack Overflow ,Thanks for contributing an answer to Stack Overflow!

With <Link href="/containers/grades/List" as="/grades"> you have client side route and for server side just add this below code to your next.config.js;

 experimental: {
    async rewrites() {
       return [{
          source: '/grades',
          destination: '/containers/grades/List'
       }];
    }
 }
load more v
88%

href - The path or URL to navigate to. This is the only required prop,If the child of Link is a function component, in addition to using passHref, you must wrap the component in React.forwardRef:,If the child of Link is a custom component that wraps an <a> tag, you must add passHref to Link. This is necessary if you’re using libraries like styled-components. Without this, the <a> tag will not have the href attribute, which might hurt your site’s SEO.

We can have a link to each of these pages like so:

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home
load more v
72%

_app.js This is a custom component that resides in the pages folder. Next.js uses this component to initialize pages.,Next.js exposes a Link component from the next/link API that can be used to perform client-side route transitions between pages.,The next/link API exposes the Link component as a declarative way to perform client-side route transitions.

next - app├── node_modules├── pages│├── _app.js // ⚠️ Custom page (unavailable as a route)
│├── _document.jsx // ⚠️ Custom page (unavailable as a route)
│└── index.ts // path: base-url (/)
├── public├── styles├──.gitignore├── package.json└── README.md
load more v

Other "custom-navigate" queries related to "NextJS: How to navigate from url to a custom path?"