Making Code Reusable In Next.js
With The Help Of The Map, Feature
Photo by Mohammad Rahmani on Unsplash
What Is Reusable Code?
Reusable code, by definition, intends to promote efficiency, consistency, and flexibility through the software and can be used through apps and even projects. Reusable code has the ability to adapt to different concepts and can be easily navigated to.
Writing Code - Setup
If you haven't created a Nextjs app before, I recommend going to my Nextjs beginners tutorial to gain a deeper understanding of creating a project.
But simply, we are just going to create an app in your desired location and call it reusable components for this example. You can do all this by simply going into your terminal and writing, npx create-next-app@latest. This will run you through a bunch of settings and add-ons you could wish to add.
In this example, I will be using:
Yes to TypeScript
No to ESLint
Yes to Tailwind CSS
Yes to `src/` directory
Yes to App Router
No to import alias
After doing so, you should be all ready to get started, and before going into your code for the project, make sure you cd into it, as this is a common mistake many people make. Once you do so, you should have a project layout similar to mine.
If all goes to plan, you should have all the setup steps completed and be ready to move on to the fundamentals in the next step.
Writing Code - Fundamentals
The first step is to clean up the page.tsx file inside the src/app folder. We are going to get rid of all of the code inside the return element. And inside, we are going to add a div. Inside of this div, you can write anything you want for now.
Before we write anything here, you are going to want to start the application simply by opening up a VisualStudio terminal or your own. Once you have done so, you can run npm run dev to start it up.
Inside global.css, you are going to get rid of all the other styles except the tailwind CSS base, components, and utilities CSS added in there.
Once you do so, you can add some text, and you should see that text there.
Well, now that we have a running application and text that appears, I am going to show you how you can have reusable components.
Writing Code - Making The Reusable Component
The first thing that we are going to want to create is a JSON file inside the root folder or inside the direct folder that you are working in; it doesn't matter, but all you are going to want to do is add square brackets( [] ) to create an array, and that's it for now.
Now let's go back to the page.tsx file and import this JSON file. We are going to do that by simply saying:
import anythingyouwanttonameit from "../whateveryounamedit"
Just make sure you put whatever name you want, and also make sure that you use the right amount of dots and slashes to navigate to the file.
Going back to the JSON file, we are going to add some attributes:
{
"product1" :[
{
"id": "1",
"Title": "Product 1",
"Description": "This Product Is Very Good"
}
]
}
Doing this will now allow for data to be used through the app, and because we have imported this JSON file, we can now use this information.
Inside of page.tsx, to use this data set inside of the JSON file, we are going to use a built-in keyword call map. What map does is it allows for communication between JSON and JavaScript (React) to transfer data between the two.
As an example, we are going to be collecting this information using map.
The first step is to get rid of your text inside the div in page.tsx. Instead of this static text, we are going to make it more dynamic. Add curly braces inside of the div.
return (
<div>
{}
</div>
)
Now, inside of these curly braces, use the name that you imported on the top of the page and use it inside of the braces. Once you do so, you will see that you can now navigate to the item you created inside of the JSON file by simply adding a full stop( . ) after the name that you specified.
return (
<div>
{data.product1}
</div>
)
In my case, I could redirect to product1, which is one of the arrays that I added. Now again, if you add a full stop, we can now add the map property, which essentially does nothing but allow for communication and access to your set data properties such as title and description, which I have added. Adding this after the full stop and then the next step is to add braces( () ) after map.
return (
<div>
{data.product1.map(data)}
</div>
)
As you can see, I have added braces and a keyword, data. What this does is allow you to use your properties, but instead of using a default keyword, you can put a name/text here, and every time you are trying to use a property, you have to put this keyword beforehand.
return (
<div>
{data.product1.map(data =>
<div>
</div>
)}
</div>
)
The next step is to add an arrow function and then add a div inside of here. Using the id property that I have put in, I am going to add this as a key to the div
return (
<div>
{data.product1.map(data =>
<div key={data.id}>
<h1>
</h1>
<p>
</p>
</div>
)}
</div>
)
In doing so, I also added a h1 and a p tag so I can use my title and description properties in separate parts.
return (
<div>
{data.product1.map(data =>
<div key={data.id}>
<h1>
{data.title}
</h1>
<p>
{data.description}
</p>
</div>
)}
</div>
)
Like at the start, you have to add curly braces and then adding my keyword data, allows me to navigate to the right property inside of the JSON File.
If you followed as said, you should have text displaying dynamically, which is way more flexible than the normal static text. Opening up your browser, you should see your text from the JSON file appear.
Now that we have completed that, you can make your components more flexible and dynamic.
Conclusion
Now that you have learned how to map components and make them more flexible and dynamic, you can play around with lots of things related to that.