Anyone got an idea why next link to an

[summer grotto]

Hi @wicked apex. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

[wicked apex]

@summer grotto

[summer grotto]

Sorry @wicked apex, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

Let me check the knowledge base for you. One moment! :books:

Sorry @wicked apex, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

[wicked apex]

@summer grotto what about now?

[summer grotto]

Let me check the knowledge base for you. One moment! :books:

---

Hmm, I don't know enough to give you a confident answer yet. Your question is not clear, and it's not related to NextJS. If you have any questions about NextJS, please feel free to ask, and I'll be happy to help.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@wicked apex kapa.ai is still learning and improving, please let us how it did by reacting below

[wicked apex]

@summer grotto following up on this. What are next/link anchor props?

[summer grotto]

Let me check the knowledge base for you. One moment! :books:

---

The next/link component in Next.js allows you to pass anchor tag properties as props. These properties will be forwarded to the underlying <a> element. Here's a summary of the next/link props and some anchor tag properties you can pass:

Prop	Example	Type	Required
href (https://beta.nextjs.org/docs/api-reference/components/link#href)	href="/dashboard"	String or Object	Yes
replace (https://beta.nextjs.org/docs/api-reference/components/link#replace)	replace={false}	Boolean	-
prefetch (https://beta.nextjs.org/docs/api-reference/components/link#prefetch)	prefetch={false}	Boolean	-

Anchor tag properties (e.g., className, onClick, target="_blank") can also be added to the next/link component as props, and they will be passed to the underlying <a> element.

For example:

import Link from 'next/link';

export default function Page() {
  return (
    <Link href="/dashboard" className="custom-class" target="_blank">
      Dashboard
    </Link>
  );
}

Sources:

• Next.js Beta Documentation (https://beta.nextjs.org/docs/api-reference/components/link)
• Next.js Documentation (https://nextjs.org/docs/api-reference/next/link)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@wicked apex kapa.ai is still learning and improving, please let us how it did by reacting below

[wicked apex]

what would be the right way to link to an element on the same page with a defined id with next/link? Should I use target somehow?

@summer grotto what would be the right way to link to an element on the same page with a defined id with next/link? Should I use target somehow?

[summer grotto]

Let me check the knowledge base for you. One moment! :books:

---

To link to an element on the same page with a defined ID using next/link, you can use the href prop with a hash followed by the element's ID. You don't need to use the target prop in this case, as it's used for specifying where to open the linked document (e.g., in a new tab).

Here's an example:

import Link from 'next/link';

export default function Page() {
  return (
    <div>
      <Link href="#section-id">
        Go to Section
      </Link>

      {/* ... other content ... */}

      <div id="section-id">
        This is the section with the defined ID.
      </div>
    </div>
  );
}

In this example, clicking the "Go to Section" link will scroll the page to the element with the ID section-id.

Source: Next.js Documentation (https://nextjs.org/docs/api-reference/next/link)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@wicked apex kapa.ai is still learning and improving, please let us how it did by reacting below

[wicked apex]

hmm so if I am on /en route I dont have to pass the absolute url like so /en#section-id but only the id #section-id? @summer grotto

hmm so if I am on /en route I dont have to pass the absolute url like so /en#section-id but only the id #section-id? <@&1089670008898080870>

hmm so if I am on /en route I dont have to pass the absolute url like so /en#section-id but only the id #section-id? @summer grotto

[summer grotto]

Let me check the knowledge base for you. One moment! :books:

---

Yes, that's correct. If you're on the /en route and you want to link to an element with a defined ID on the same page, you only need to pass the ID with a hash, like #section-id. You don't need to include the absolute URL.

Here's an example:

import Link from 'next/link';

export default function Page() {
  return (
    <div>
      <Link href="#section-id">
        Go to Section
      </Link>

      {/* ... other content ... */}

      <div id="section-id">
        This is the section with the defined ID.
      </div>
    </div>
  );
}

In this example, when you're on the /en route and click the "Go to Section" link, the page will scroll to the element with the ID section-id.

Source: Next.js Documentation (https://nextjs.org/docs/api-reference/next/link)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@wicked apex kapa.ai is still learning and improving, please let us how it did by reacting below

[wicked apex]

@summer grotto then the set i18n route gets lost though, or not? I think let me check

[summer grotto]

Let me check the knowledge base for you. One moment! :books:

---

If you're using Next.js i18n routing and you want to link to an element with a defined ID on the same page, you can still use the hash with the ID, like #section-id. The i18n route will not be lost, as the browser will only scroll to the element with the specified ID without changing the current route.

Here's an example:

import Link from 'next/link';

export default function Page() {
  return (
    <div>
      <Link href="#section-id">
        Go to Section
      </Link>

      {/* ... other content ... */}

      <div id="section-id">
        This is the section with the defined ID.
      </div>
    </div>
  );
}

In this example, when you're on the /en route and click the "Go to Section" link, the page will scroll to the element with the ID section-id, and the i18n route will remain the same.

Source: Next.js Documentation (https://nextjs.org/docs/api-reference/next/link)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@wicked apex kapa.ai is still learning and improving, please let us how it did by reacting below

[wicked apex]

not true, it does change the i18n route to browser default or jumps to default if, no browser set locale is applicable...

@summer grotto last answer is not true, it does change the i18n route to browser default or jumps to default if, no browser set locale is applicable...

[summer grotto]

Let me check the knowledge base for you. One moment! :books: