Next.js Discord

Discord Forum

Anchor Help

Unanswered
Common carp posted this in #help-forum
Open in Discord
Common carpOP
Hello,

I'm encountering a problem with implementing anchor links in my project using Next.js. In my NavBar.tsx, I have the following structure:
<Link href="#services">
            <span>Services</span>
          </Link>
          <Link href="#projects">
            <span>Project</span>
          </Link>
          <Link href="#contact">
            <span>Contact</span>
          </Link>

In page.tsx, I'm trying to link these to my components as follows:
<Services id="services" />
      <Projects id="projects" />
      <Contact id="contact" />

But it's not working for some reason. It's asking me:
Type '{ id: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'id' does not exist on type 'IntrinsicAttributes'.ts(2322)
(property) id: string

I have attempted to resolve this by defining an interface in my component files, but it hasn't worked. Could you advise on how to correctly implement this feature?
interface ProjectData {
  id: number;
  title: string;
  URL: string;
}

1 Reply

Common carpOP
This is my file structure:
src
â”— app
┃ ┣ components
┃ ┃ ┣ Contact.tsx
┃ ┃ ┣ Footer.tsx
┃ ┃ ┣ NavBar.tsx
┃ ┃ ┣ Projects.tsx
┃ ┃ ┗ Services.tsx
┃ ┣ styles
┃ ┃ ┣ contact.module.css
┃ ┃ ┣ footer.module.css
┃ ┃ ┣ globals.css
┃ ┃ ┣ navbar.module.css
┃ ┃ ┣ page.module.css
┃ ┃ ┣ projects.module.css
┃ ┃ ┗ services.module.css
┃ ┣ favicon.ico
┃ ┣ layout.tsx
┃ ┗ page.tsx

And my sections are located in the page.tsx section