Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Routes Setup
Loading...
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
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 Remember that video kit and the Figma design I showed you a bit before?
00:00:06 Well, now we'll need it.
00:00:07 So open it up and taking a look at the screens that we have right here, let's try to figure out which pages we need within our application so we can implement
00:00:16 the routes for those pages.
00:00:18 Starting off with our homepage.
00:00:20 We'll surely need that one.
00:00:22 And thankfully, we already have it.
00:00:24 It is right here under app page.tsx.
00:00:27 After that, we'll also need the sign in so that our users can actually sign in.
00:00:32 So for now, let's create it right here within app and add a new folder and let's call it sign-in and within it, create a new page.tsx.
00:00:47 And for now, you can simply run RAFCE within every single one of these pages we'll create, which will spin up a new empty React functional component.
00:00:56 Now, how do we get to this page, this sign in page within our browser?
00:01:00 Well, you'll have to head over to localhost 3000 forward slash sign in.
00:01:05 And that's it.
00:01:06 And you should be able to see a small sign-in text right at the top left.
00:01:10 Now, this is working right out of the box with Next.js because of its file-based routing.
00:01:15 So whenever you create a new folder with a specific name and create a special file within it called page.tsx, it'll expose that route to the browser,
00:01:24 forward slash sign-in in this case, and it'll render the contents of that page.
00:01:28 Okay, what else do we have between the sign-in and the home page?
00:01:33 Well, we're going to have a companion library page where we can explore all of the learning courses that other people have created so far.
00:01:40 So we can create it by creating a new folder right within our app, and we can call it companions.
00:01:48 as in learning companions, and within it, I'll create a new page.tsx and run rafce.
00:01:57 This one I'll call companions library, and we no longer need the import of React within Next.js applications.
00:02:04 It works without it as well.
00:02:06 Next, we'll need a build a companion form.
00:02:09 So let's create it.
00:02:11 We can create it within the same folder.
00:02:13 So that's going to be within companions.
00:02:16 But I'll create a new folder within it and I'll call it new.
00:02:21 And then within that folder, I'll create another page, which will host that form.
00:02:26 So just create it and run RAFCE within it, which will quickly spin up a new functional component.
00:02:32 We can rename it to something like.
00:02:35 new companion, and we can clear this React import.
00:02:39 Next, we'll have a companion or a conversational course lesson page.
00:02:44 So let's create it right here under companions.
00:02:47 This time, not new, but actually we'll create a new dynamic route.
00:02:52 And in Next.js, you can do that by creating a new folder and wrap it with square brackets.
00:02:59 Within it, you can define the URL parameter that you want to have for this specific route.
00:03:04 In this case, I'll call it ID.
00:03:07 And within ID, I'll create a new page.tsx.
00:03:11 Once again, here you can run RAFCE.
00:03:14 And I'll rename it to companion session, because here we'll actually be learning from that learning companion.
00:03:23 Next, we'll have our profile page, or we can call it my learning journey.
00:03:28 So I'll create it right here, not within companions anymore, but within a new folder, which I will call my-journey.
00:03:38 And within my journey, we can create a new page.tsx.
00:03:44 Run RAFCE, and rename it to maybe profile page like this, or just profile.
00:03:51 Perfect.
00:03:53 And finally, we have a subscription page.
00:03:56 Here, we'll actually be able to upgrade our user tier.
00:04:00 So let's create it by creating a new folder right here within our app, and I'll call it subscription.
00:04:07 And within subscription, I'll create a new page.tsx, run RAFCE, And we can call it Subscription.
00:04:14 Perfect.
00:04:15 These are all the different screens that we'll need within our application.
00:04:18 And now we have actually added them within our application.
00:04:22 So now if you want to head over to, for example, My Journey, you can do that very easily.
00:04:27 And it navigates you to a profile page.
00:04:30 Or maybe if you want to go to Companions and visit a specific session, you can do that very easily and head over to any one of these internal routes as well.
00:04:40 Wonderful.
00:04:41 So with that in mind, we have now not only set up the app configuration, but also the initial routes of the application.
00:04:48 So to further improve your learning experience, what I want to do at this point is publish this project to GitHub.
00:04:55 You can head over to github.com forward slash new, and this will bring you to a new repository page.
00:05:01 Now, why are we already publishing to GitHub?
00:05:04 Well, a better question would be why not?
00:05:07 When you're developing your SaaS applications, the biggest mistake you can make is just to keep developing it locally.
00:05:13 Many things can go wrong and you can lose access to your code base or even worse.
00:05:18 Maybe you change some code and it breaks the application and you don't know how to revert it.
00:05:24 But if you continuously make commits over to GitHub, you'll be able to revert to a previous stage of your application at any point in time.
00:05:32 So let's actually create a new repo and I'll call it SaaS app.
00:05:38 I'll leave it public and click create.
00:05:40 Once you do that, you can follow these steps right here, or just follow what I'm doing.
00:05:45 Within the terminal, you can run git init, git add dot to add all of the currently saved files within it.
00:05:54 git commit –m initial commit git branch m main git remote add origin and then copy the link to your GitHub repo and finally git push u origin main and
00:06:10 this will nicely push the code that you have added so far over to GitHub so if you reload you'll be able to see all of your code right here Now,
00:06:17 this will be super useful for those of you that are watching this course over on JS Mastery Pro.
00:06:23 Why?
00:06:24 Because this entire course will be split into individual lessons, so you'll be able to see exactly what we're doing lesson to lesson,
00:06:32 and for each lesson, you'll be able to read a summary, as well as the entire transcript of that video, then you'll be able to test your knowledge with
00:06:40 a quiz.
00:06:41 And most importantly, you'll have access to a link pointing to the GitHub commit containing only the code for that lesson.
00:06:48 I mean, you can check it out right here on GitHub if you head over to commits and then see this commit that we have added right now.
00:06:55 But later on, it's going to be easier to track it lesson by lesson.
00:06:59 Still, whenever I remember, even in the video, I'll try to remind you to also push the GitHub so that your code is nice and clean within your repo.
00:07:08 But with that in mind, now that we have set up the routing of our application, we might as well go and create a navigation bar,
00:07:16 because here we're going to have links that point us to different pages that we have just now created the routes for.
00:07:22 For example, clicking on Home will point us to the homepage, Learning Companions will point to that page, Journey will point us to the profile,
00:07:30 and logout will bring us back to the sign-in page.
00:07:33 So in the next lesson, let's develop our navbar.
