NextJS App router <base /> tag in head | Next.js | Page 1

NextJS App router tag in head | Next.js | Page 1

olive aspen · 2024-08-21T11:30:48.529Z

How would I add the [base](https://www.w3schools.com/tags/tag_base.asp) tag to the head tag when using app router?

olive aspen Aug 21, 2024, 11:30 AM

#

How would I add the base tag to the head tag when using app router?

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

autumn roostBOT Aug 21, 2024, 11:30 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

ivory island Aug 21, 2024, 1:44 PM

#

my thought was generateMetadata might allow putting custom tags on the head tag. but after some digging, it doesn't seem to be the case since it's hardcoded to only be able to put specific meta tags and nothing else

well, afaik it's not possible to do so, what are you trying to achieve with a base tag anyway? to be honest, this is the first time I've ever heard of it lol

patent pewter Aug 21, 2024, 4:35 PM

#

You shouldn't be needing that base tag. You can directly use relative links and they will work as needed. If there is a specific use case you want then please mention it.

For metadata, there is metadataBase: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase

If you are deploying under a children directory for example /docs you can use basePath, it is automatically applied to links:
https://nextjs.org/docs/app/api-reference/next-config-js/basePath

Moreover you should be able to use the <head> tag inside the main layout file.

next.config.js Options: basePath | Next.js

Use basePath to deploy a Next.js application under a sub-path of a domain.

Functions: generateMetadata | Next.js

Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.

olive aspen Aug 21, 2024, 7:11 PM

#

The use case is that we need to be compliant for a certificate. To become compliant we need to add the base tag in order to mitigate this security issue: https://punksecurity.co.uk/blog/base_tag_injections/

Base tag HTML injection: A guide for pentesters

We're diving deep into a lesser-discussed variant of HTML injection that isn't very well known at all, Base Tag Injection.

patent pewter Aug 21, 2024, 7:21 PM

#

olive aspen The use case is that we need to be compliant for a certificate. To become compli...

You can try adding the tag in <head> in the main layout file.

Also if your app doesn't take input and/or its properly sanitized it shouldn't be a issue.

olive aspen Aug 21, 2024, 8:14 PM

#

My app takes input. And that is correct, propper sanitization would mitigate that. That does not fix my issue however, since having the base tag to pass the certificates requirement is what I need to solve

#

When testing it seems like I can´t use the head-tag at the same time as exporting the metaData object? Correct?

#

So If I want to add the base tag I should resort to a traditional head-tag with meta tags etc inside?

lean dove Aug 22, 2024, 6:25 AM

#

you can add a head tag inside the root layout(s) normally. it works in conjunction with the metadata object system very well.

#NextJS App router <base /> tag in head