CODEWITHSUNDEEP
next.js
HiB
HiB

Reputation: 33

What is wrong with this dynamic routing in Nextjs?

This might be a repeat question, and I might be doing this completely wrong in which case, excuse my lack of understanding for the moment. I'm currently building a Nextjs app with the plan to intergrade Shopify/Hydrogen but for now, scratch. I'm currently trying to build a dynamic link, using <Link> using the docs. See here: [Next/Link docs][1]

The Link contains an <a> child so that's why I'm assuming the necessity for the dynamic link. To do so, I've created the following constant:

import Link from 'next/link'
import React from 'react'

const MyButton = React.forwardRef(({ href }, ref) => {
  return (
    <a href={href} ref={ref} className={styles.imgc}>
     <img
      className={styles.img}
      src="weatherbutton.jpg"
      width="100"
      height="50"> 
     </img>
     <div>&rarr; Weather</div>
    </a>
  )
})

Of which I then have the simple:

<Link href="/satweather" passHref>
 <Weather />
</Link>

As instructed in the docs. It is not being held within its own <div> but rather in a single <div> containing, what I hope will contain multiple Links. I may ultimately need to switch to making those into a <ul><li> but for now as is - unless that is necessary to the functionality.

Problem is I continued to receive a 404 error. Under advisement, changed the href= to href="/satweather" passHref>

New error recieved:

  errno: -20,
  code: 'ENOTDIR',
  syscall: 'access',
  path: '/mnt/c/Users/root/Desktop/satrange/sat/pages/satweather.js/index.ts'
}```

As a follow up: Since the page I am trying to port in is a client file, would I need to then add a separate folder for the shop server pages or will placing under the api folder work? Can I create it in a different folder, then do a general js that includes only to export the server items?



  [1]: https://nextjs.org/docs/api-reference/next/link

Upvotes: 0

Views: 773

Answers (1)

Mart
Mart

Reputation: 61

The href should not link to the file in the pages directory, but rather the route relative to the base URL. So if you have a page called satweather.js in the pages directory, you would link to it as so:

<Link href="/satweather" passHref>
 <Weather />
</Link>

Upvotes: 1

Related Questions