I started using NextJS today, porting a ReactJS website to it. It seems to be a great framework, but I am missing one thing.
In pure ReactJS (no NextJS framework) there is a public/index.html page which serves as a template where all ReactJS ponents are mounted. In certain situations, when I need to add a certain script in all my pages, I just edit public/index.html and add the script to its <head></head> section.
A good example is my FontAwesome kit, which I add to all my ReactJS pages by inserting
<script src=".js" crossorigin="anonymous"></script>
to <head></head> section of public/index.html.
I searched the basic structure of a NextJS project and found no equivalent file.
How can I do the same using NextJS?
I started using NextJS today, porting a ReactJS website to it. It seems to be a great framework, but I am missing one thing.
In pure ReactJS (no NextJS framework) there is a public/index.html page which serves as a template where all ReactJS ponents are mounted. In certain situations, when I need to add a certain script in all my pages, I just edit public/index.html and add the script to its <head></head> section.
A good example is my FontAwesome kit, which I add to all my ReactJS pages by inserting
<script src="https://kit.fontawesome./9999999999.js" crossorigin="anonymous"></script>
to <head></head> section of public/index.html.
I searched the basic structure of a NextJS project and found no equivalent file.
How can I do the same using NextJS?
Share Improve this question asked Dec 23, 2022 at 16:46 Edvaldo Silva de Almeida JrEdvaldo Silva de Almeida Jr 3,7235 gold badges30 silver badges61 bronze badges 2- 1 Maybe use the Head ponent from the next/head package to add scripts and other resources to the <head> element – User 123732 Commented Dec 23, 2022 at 16:49
- @Be-WiseIndependent Do I have to add this to all my pages, one by one? Because in ReactJS I may add it only to the template page. – Edvaldo Silva de Almeida Jr Commented Dec 23, 2022 at 16:54
2 Answers
Reset to default 1We have _document.tsx file (generate one under pages folder if you do not have it yet). You can see its content on each page.
https://nextjs/docs/advanced-features/custom-document
Between Head tags you can use NextJs Script ponent to run your scripts
https://nextjs/docs/api-reference/next/script
In the index.tsx or index.js file, you will find you are able to use <Head></Head> which serves the same purpose.