"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Complete source code available till this point of lesson is available at
Download all necessary assets and place them in the public folder of the project.
Add metadata to the file.
export const metadata: Metadata = {
title: "Dev Overflow",
description:
"A community-driven platform for asking and answering programming questions. Get help, share knowledge, and collaborate with developers from around the world. Explore topics in web development, mobile app development, algorithms, data structures, and more.",
icons: {
icon: "/images/site-logo.svg",
},
};
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:02 Hey, welcome back.
00:00:03 Another setup lesson.
00:00:05 I know, we've been setting things up for a long time now, but this is the last one.
00:00:10 And if we properly set up our code base and development environment, trust me, the process of actually coding out the logic and the design of our application
00:00:18 is going to be so much simpler.
00:00:20 In this setup lesson, we'll talk about the assets and the metadata.
00:00:24 Let's start with the assets.
00:00:26 You see this logo image right here?
00:00:28 We need to get it from the Figma design to our code.
00:00:32 Same thing for all of these custom icons.
00:00:35 You have to select it.
00:00:36 You have to go right here and export it as a PNG, SVG, or whatever.
00:00:42 See, there is one here.
00:00:44 Two, three, four, five, six, seven.
00:00:46 There is the magnifying glass.
00:00:48 There's also these icons right here.
00:00:50 There's a lot of icons and a lot of images in general.
00:00:54 And as a challenge for you, you now need to go through this entire Figma design and download all the assets that you think are needed.
00:01:02 Everything from the icons to these badges right here.
00:01:06 No need to download these, because these will be dynamically generated, as the user tags are also user-generated.
00:01:12 You'll need to get this trash and edit, and even some of these, like there's no question to show illustrations, as well as the background image for the
00:01:20 auth that'll appear right behind it.
00:01:22 Also, some icons might need to change colors depending on the mode.
00:01:26 So you can now take a couple of minutes, go through the entire design, and download all the assets with the proper naming convention.
00:01:34 That's super important.
00:01:36 When you're downloading these, make sure to give them proper names, because that's gonna be super important when we need to use them within our code later on.
00:01:44 I'll even leave some important information about how to name those assets below this lesson, so you can practice that.
00:01:50 So when you download them, where are you going to place them?
00:01:53 Well, you might know that based on what I taught you in the introduction, where I told you what all of the files and folders are for.
00:02:00 In this case, the public folder right here is for the assets.
00:02:04 So you would need to delete everything that is currently on there and then start moving your assets in there.
00:02:11 Once you fully do it, or once you download a couple and you feel like it's enough, you can then get the full public folder from below this lesson and then
00:02:19 copy and paste it here.
00:02:21 It's gonna look something like this.
00:02:23 It's gonna contain our Favicon, some other SVGs, and then all the images like Auth Dark, Auth Light, Dark Illustration, Default Logo,
00:02:32 Light Illustration, Logo.png, and then all the different icons we'll be using.
00:02:38 There's quite a lot, as you can see here.
00:02:40 So even though you might have started downloading it, might be a good idea to just get this public folder, just so we have the exact same naming for different arrows,
00:02:48 avatars, medals, and so on.
00:02:50 Once you have them all here, we can test it out.
00:02:53 And we'll test it out by using the smallest of them all, which is the favicon.
00:02:57 What you have to do is drag and drop the current Favicon to the app folder, which is going to replace the old one with the new one.
00:03:06 After that, we can focus on the metadata.
00:03:08 So if you scroll down, you'll see that Next.js exports a metadata object.
00:03:13 Metadata contains information about your site that helps search engines understand its content.
00:03:19 It's not something that users usually see, but it's embedded into the website's code.
00:03:24 For example, the title tag tells search engines the title of the website, while description provides a brief description of the site.
00:03:32 This helps with SEO by improving visibility, it boosts click-through rate because users know exactly what they're clicking into,
00:03:40 and it improves the accessibility.
00:03:42 In short, Next.js metadata helps search engines rank and show your site to the right audience.
00:03:49 We have the static metadata, or you can even use dynamic ones to make it different for each page.
00:03:55 So let's improve our metadata a bit.
00:03:57 I'll go ahead and modify the description a bit, saying that DevFlow is a community-driven platform for asking and answering programming questions.
00:04:05 Get help, share knowledge, and collaborate with other developers from around the world.
00:04:10 Explore topics in web development, mobile app development, algorithms, data structures, and more.
00:04:15 This is useful for search engine optimization.
00:04:18 We can also go a step further and choose icons, icon, and set that to point to images, site-logo.svg.
00:04:28 Now, if you go back to the browser, changes won't be immediately apparent, but you can see right here that we have a new favicon and the title.
00:04:37 And with that, we also have 59 new changes.
00:04:40 I think this is the most that we'll have in a single commit, as we have just added all of the necessary assets for the entirety of the project.
00:04:48 So let me just enter the message, assets and metadata, commit and sync.
00:04:54 Before we finish with the setup, there's one cool thing that I like to do to clean up my file tree even further.
00:05:00 And to do that, we can go into the .vscode and then right at the bottom, You can say something like this, files.exclude,
00:05:10 and you can exclude the .vscode, the .next folder as well, maybe even the node modules as we don't have to see it that often.
00:05:17 We can also exclude this next-env.d.ts.
00:05:23 You can see how simple it is.
00:05:24 Now, if you save it, you can see that now we have a bit of a cleaner work tree.
00:05:28 This is also possible on other editors, but VS Code makes it super simple.
00:05:33 And with that, we're completely done with the setup and are ready to dive straight into the app folder and start implementing our app's first functionalities.