google analytics
Add Google Analytics to NextJs project.
Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications. Adding Google Analytics to your next project is simple yet a little confusing. So in this blog, we will understand how to add Google Analytics to your next project with a simple and straightforward guide.
Firstly, we need to install a third-party library by using the command <span>npm install @next/third-parties</span>.
<h3>Load Google Analytics for all routes:</h3>
To load Google Analytics for all routes, add the component directly in your root layout.js. Add <span>import { GoogleAnalytics } from '@next/third-parties/google'</span> and then use the component <span><GoogleAnalytics gaId="G-XYZ" /></span>, replacing G-XYZ with your actual Google Analytics tag ID. After adding all this, the code will look something like this.
<img src="https://meetprvt.github.io/blogassets/blogassets/next_analytics_1.png">
<h3>Load Google Analytics for single routes:</h3>
For single routes, navigate to your file, then add <span>import { GoogleAnalytics } from '@next/third-parties/google'</span> and use the component <span><GoogleAnalytics gaId="G-XYZ" /></span> at the top of your function. For example, I have added it in <span>Home()</span>. Check the snippet below for better understanding.
<img src="https://meetprvt.github.io/blogassets/blogassets/next_analytics_2.png">
That's how you can add Google Analytics inside your next project. Note to always add the GoogleAnalytics component inside a function which you are using and avoid creating a new function to add the GoogleAnalytics component. If you want to check this process from the official Next.js site, here is <a href="https://nextjs.org/docs/messages/next-script-for-ga" target="_blank">link</a>.
NextJs/Json
Fetching JSON Data in Next.js A Beginner’s Guide
If you are learning next.js then you might wonder how to fetch a json/api and display it inside your project or you just want to know how to achieve that. In this guide I will help you with fetching json and then display it in your project too.
This guide is going to beginner's friendly so if you have just started with next.js then don't worry.
<h2>Step 1: Set Up Your Project Structure</h2>
First thing, lets setup basic project structure. Follow these steps :
<ol>
<li>Create a "lib" folder : In this folder we will store out fetching logic file. You can create folder in root directory of project ( just like "app" folder ).</li>
<li>Create a "getData.jsx" file : Inside your "lib" folder we will create "getData.jsx" file. In this file we will write our fetching logic.</li>
</ol>
<h2>Step 2: Write the Fetching Function</h2>
Now, lets define our asynchronous function that fetches data from API.
<code>
export async function getData() {
const res = await fetch("your link here");
return res.json()
}
</code>
<h2>Step 3: Fetch Data in Your Server-Side Component</h2>
Now will fetch our data to a server-side component. Go to file in which you want to display your fetched data and follow :
<ol>
<li>Import the getData function: In the component where you want to display the fetched data, import getData.</li>
<li>Assign a const to fetched data : We will create a new const allData
and assign our fetched data to it.</li>
</ol>
<h2>Step 4: Display the Fetched Data</h2>
You can easily display the fetched data by mapping through it in your component. In the example above, each item is rendered in a list, with a unique key prop to help React manage the elements efficiently.
<h2>Conclusion</h2>
Congratulations! You've successfully set up a Next.js application to fetch and display JSON data from an API. By following these steps, you can enhance your applications with dynamic content, making them more interactive and engaging. Happy coding!