Next.js Discord

Discord Forum

NextJS App router <base /> tag in head

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
How would I add the [base](https://www.w3schools.com/tags/tag_base.asp) tag to the head tag when using app router?

9 Replies

iyxan23
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
Clown
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.
Asian black bearOP
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/
@Asian black bear 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/
Clown
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.
Asian black bearOP
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?
joulev
you can add a head tag inside the root layout(s) normally. it works in conjunction with the metadata object system very well.
Asian black bearOP
Thank you, I'll give it a go!