Is possible to use next link href to outside pages directory? 🤔

[muhghazaliakbar]

There are some cases that I need to render the pages from outside pages directory?
https://nextjs.org/docs/api-reference/next/link

[lfades]

Don't use next/link for that case, as it's only needed for page navigations, external links can use a normal anchor tag (<a>)

[muhghazaliakbar]

I mean load a page from outside pages directory (in same application) not external links.

[rafaelalmeidatk]

You can't have pages outside the possible pages directories, do you mean different Next apps? In this case you still have to use a normal anchor tag since next/link is only for client-side navigation within the same app.

[muhghazaliakbar]

@rafaelalmeidatk I think we can use a component outside pages directory as page using next/link 🤔. In this case, I have 2 next.js apps installed one same library that included page component and I want to use that for those apps.

[rafaelalmeidatk]

next/link is only for client-side transitions, it doesn't create pages. If you don't have a component inside the pages folder or don't use a custom server then the page won't render.

If you have page components inside a library and want to show them, you can create a file inside the pages folder and reexport the page from the library. The code will heavily depends on how you structured the lib, here is an example:

// pages/foo.js
import FooPage from 'your-pages-lib/FooPage';

export default FooPage; // export the page itself
export * from 'your-pages-lib/FooPage'; // reexport named exports like `getStaticProps`

[hpachy]

Hello I got the same question! I have a navBar component inside the components folder.
I would like to use next/Link to navigate from this component to dynamic page inside pages folder. Is it possible to use next/Link in my navBar component?

[danielolamide]

Did you sort this?

[hpachy]

Hello @danielolamide !

Yes I figured out that was my bad, cause I miss understood how it's work and I was totally sure I was wrong. I finally understood how it's currently work.

The thing is in the doc the part I missed understanding few month ago, next/link is compose of 2 parts (If I can say that). I'm taking an example of the doc :

<Link href="/post/[pid]" as="/post/abc">
  <a>First Post</a>
</Link>

So the href is like bridge to your app to localise the page, to be rendered (href is a file system path used by the page ). Instead of href, as will be dynamic most of the time according to your needs.

example :

You got pages/user/[id].tsx (it's can be user get page or what ever), and to access to this page from the component folder you gonna just use next/link like bellow.

So the url will look like http://localhost:3000/user/[id] (dynamique url)

So in you component folder, I imagine component witch gonna display list of users to click on it and have it's information:

pages/index.tsx (let's say you component witch gonna list you users will be called in the pages/index.tsx)

import isListingUsers from '../component/isListingUsers'

export default function Home({ }) {
  // fctParseUrl you make to take of id for exmaple
  const data = [
     {
       name: toto,
       id: 0
     },
     {
       name: tata,
       id: 1
     },
     {
       name: titi,
       id: 2
     }
  ]
  return (
    <div>
      <isListingUsers data={data} />
    </div>
  );
}

component/isListingUsers

export default function isListingUsers({ data }) {


  return (
    <div>
      {
             data.map(() => { 
                 return (
                             <Link href="/user/[id]" as={`/user/${data.id}`}>
                                   <a>
                                        <span>{data.name}</span>
                                   </a>
                             </Link>
                             )
             })
       }
    </div>
  );
}