## About the project Welcome to the FocusTube tutorial! Through this project, you will learn the fundamentals of making your own API, calling APIs, and the additional features NextJS has over React. **What you will learn in this Series:** - How to use and create the fundamental parts of an API (endpoints, requests and responses) in NextJS - How to connect, fetch, parse, and display API data from YouTube - The fundamentals of NextJS (Server Side Rendering vs Client Side, Dynamic Routing, Loading States, Routing) - OPTIONAL: Learn how to use TailwindCSS **What you will make:** By the end of this series, you will have a basic full-stack YouTube wrapper that allows you to use YouTube through your own design, such as removing YouTube’s distracting features. **Further Possibilities:** There are many avenues you can take with this project. While it will be fully functional by the end of this tutorial, there are plenty of opportunities to add your own features and make this project your own. I will go more in depth on these possibilities later in the tutorial. ## Disclaimer **This series assumes a couple of things:** - You have decent knowledge of JavaScript - You have basic knowledge of React - You already have the necessary tools installed (Node.js, an IDE like VS Code) ## Setup the project You will be making your own project instead of forking a repository. Making a NextJS app is incredibly easy. Open a terminal. In the terminal, go to the folder you want your NextJS project to be in, then run this command: ```console $ npx create-next-app@latest ``` You will be given multiple prompts on how you want your project to be. I included the settings I selected, which you can change if you want, but I will only cover the technologies I have selected. ```console ✔ What is your project named? … my-app ✔ Would you like to use TypeScript? … No ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like your code inside a `src/` directory? … Yes ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to use Turbopack for `next dev`? … Yes ✔ Would you like to customize the import alias (`@/*` by default)? … Yes ``` Now you will now have a folder for your project. I named mine **/my-app**, as seen above. cd into that folder and run: ```console $ npm run dev ``` This will start up your app and you will can visit it [here at localhost:3000](http://localhost:3000/) **NOTE:** When you change your project, this will automatically update the website for you. There is no need to keep terminating and restarting the program. Now you are ready to start the tutorial! Take a look at your file tree. It should look something like this: ``` my-app/ ├── node_modules/ ├── public/ ├── src/ │ └── app/ │ ├── favicon.ico │ ├── globals.css │ ├── layout.js │ └── page.js ├── .gitignore ├── eslint.config.mjs ├── jsconfig.json ├── next.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.js └── README.md ``` Feel free to check out **page.js** in your app folder, this is the **home webpage** in your NextJS app, which is a good transition into the first topic. ## File-Based Routing File-Based Routing means that the structure of your files and folders inside the **app/** directory automatically defines the routes in your web app. Let’s take a look at what this really means. In your **/app** folder create a folder called *```/video```*. In this folder create a file called **page.js**. In this file, put something really simple like this: ```jsx export default function Video() { return (

This is the Video page!

); } ``` {: file="app/video/page.js" } Next, go to [http://localhost:3000/video](http://localhost:3000/video) Here, you will find the component you just wrote. This because of the File-Based Routing in NextJS; since you made a folder in your **/app** directory and gave it a **page.js**, the web app now treats this *as a route*. In other words, any **folder** in the **/app** directory will become a path in your web app (as long as you have a page.js file inside). For more information, please feel free to use the [NextJS Documentation](https://nextjs.org/docs/app/building-your-application/routing/route-handlers). ## Adding more Routes Now that we know what file-based routing is, make **2 more routes**. - ```/search``` - ```/playlist``` For now, these can display whatever you like. Here is what your file tree should look like now: ``` my-app/ ├── node_modules/ ├── public/ ├── src/ │ └── app/ │ ├── favicon.ico │ ├── globals.css │ ├── layout.js │ ├── page.js │ ├── playlist/ │ │ └── page.js │ ├── search/ │ │ └── page.js │ └── video/ │ └── page.js ├── .gitignore ├── eslint.config.mjs ├── jsconfig.json ├── next.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.js └── README.md ``` You should have **4 routes** in your website: the homepage, ```/search``` page, ```/playlist``` page, and the ```/video``` page. Now that we have a couple routes, we can start to change how they look. Feel free to use the instructions as a guide to your own design, or copy it if you already feel comfortable in React and JS. ### Video Route It is pretty easy to add youtube videos into you web app even without any API. On most youtube videos, you can click the **Share** button, and you will see an option called **Embed**, which will give you an ``` ); } ``` {: file="app/video/page.js" } > **In the above answer I purposely mistyped one of the attributes of ``` ); } ``` {: file="app/video/page.js" } {: .blur } #### Playlist Page Since you previously implemented the playlist page on your own, I will not be providing code here. Feel free to copy from the search page or make it on your own. ## Dynamic Routing For many websites, it is impossible to hardcode every single page. This is one such case, as it needs to be able to render **any video on youtube**. Luckily, NextJS has a pretty simple way to make the webpage differ based on the url provided. It's called Dynamic Routing. **Here is an example:** I have this route in my app: `app/video/page.js` Currently, this is kind of useless because there is only one video. However, with dynamic routing, we can insert the Video ID into the url to affect the webpage. In order to implement this, you will need to create a new folder inside your route folder. It should look like this: `app/route/[routeId]/page.js` NextJS only knows you have a dynamic route in the folders with brackets around them. **Pay attention to what you name the folder inside the brackets. That is what we will need to call in the next section.** ### Where we need Dynamic Routing We need dynamic routing pretty much anywhere the webpage is impacted by the url parameters, which happens to be **all of our routes** in this case. So, you should: - Make a new folder in all routes *(/search, /video, /playlist)* - Name your new folders whatever you want, it just has to be in brackets to work: `[name]` - Move the **page.js** file in each route into each dynamic route folder Your file tree should now look like this: ``` my-app/ ├── node_modules/ ├── public/ ├── src/ │ └── app/ │ ├── favicon.ico │ ├── globals.css │ ├── layout.js │ ├── page.js │ ├── playlist/ │ │ └── [playlistId]/ │ │ └── page.js │ ├── search/ │ │ └── [searchId]/ │ │ └── page.js │ └── video/ │ └── [videoId]/ │ └── page.js ├── .gitignore ├── eslint.config.mjs ├── jsconfig.json ├── next.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.js └── README.md ``` #### Now go to each route by typing `/route/[anything you want here]` Also, notice **if you go to just `/route` there will be nothing now.** This is because page.js has been moved into the dynamic route, **so can no longer be found from /route.** ## Using params The biggest reason why we use these dynamic routes is it makes it easy to pass information to the page via a URL. In order to do so, we call the **params**. - The *params* are the dyanmic route parameters, so whatever is passed in the URL can be called using *params* ```jsx // Here is an example on how to call parameters export default function Route({ params }) { const { id } = params; // IMPORTANT: // See how I call 'id', this should be replaced with what you titled // your folder, if you followed my naming convention you would put // searchId, videoId, or playlistId return (

This is a Route with the URL Containing {id}

); } ``` ### Implementing Since all of our routes are dynamic, in every route, **call params and integrate it in someway to your component**, it does not have to make sense yet, that is for later. > The code I gave you had an error, it is not a major error (for now), click **Fn + F12** and it will show you the error. Read the document it provides to correct your code {: .prompt-danger } **Answer below** ```jsx // Just kidding, this is not the answer // However, I will put the link to the documentation here, as it // contains exactly what you need // https://nextjs.org/docs/messages/sync-dynamic-apis // As a programmer, always remember to use the documentation; it is there // for a reason! ``` {: .blur } ### Challenge Task **Make the parameter in the /video/[ videoId ]/page.js determine the video id** > HINT: Look at how the embedded video URL is formatted {: .prompt-tip } ## Client vs SSR React is a primarily "Client Side Library". What does this mean? - Client Side Rendering means the browser receives basic HTML page with links to the JS files. Basically, **its running purely on your browser**. NextJS has both Client side rendering, as well as Server Side Rendering **What is Server Side Rendering?** - Server Side Rendering (SSR) is the process of **rendering the webpage fully on the server** and then sending the fully rendered HTML to the client By default, NextJS is SSR. However, we can easily make a file client side with this: `'use client'` ### When do I use Client vs SSR? There are some times you CANNOT use client side. Your code should be SSR if you meet any of this criteria: - You need fresh data in every response - It is important for the page to be fully rendered when displayed - You access server-only secrets or credentials (ie. calling your internal API for data) To choose which to use: **If you need to access to external data or something confidential before the page loads, use SSR** **If the data can be fetched after the page loads or you are making an interactive page with UI updates (ie. useState()), use CSR.** ### Routing Now that you know the difference between CSR and SSR, we will introduce another NextJS feature which can be used in CSR components. When using **CSR Components**, we can now use `useRouter()`. **What is useRouter()?** - Basically NextJS's `` tag for **CSR Components** - Easy way to control navigation instead of relying on `` tags - Supports many different functions, shown below ```jsx const router = useRouter(); // sends you to another route in your website router.push('/specified/path'); // refreshes the current route you are at route.refresh(); // Go back in your history route.back(); ``` ## Implementing Client Side Rendering We are going to have **2 components that use client side rendering** - `app/video/[videoId]/page.js` - `app/page.js` **Why make these two Client Side?** Web pages loading before everything is ready is fine, whereas showing incomplete results while in a search is not ideal. ### Challenge Task > Make these two components client side components. When doing this, you will run into a couple errors. Attempt to Google or look at the documentartion for why you get these errors. {: .prompt-warning } The solution will be provided for `app/video/[videoId]/page.js`. Feel free to take a look if you get stuck or when you finish to ensure are working in the right direction. The solution for `app/page.js` won't be provided since it will not throw any errors when making it a Client Side Component. ```jsx "use client"; import { useParams } from "next/navigation"; export default function Content() { // since this is NOT a server side component we CANNOT use await // luckily NextJS provides a useParams hook to get the params from the URL // this is a client side component this is our equivalent to the server side // of 'await params' const { id } = useParams(); return (

); } ``` {: file="app/video/page.js" } {: .blur } > Since our main page (`app/page.js`) is meant to route us to other pages and is a CSR, use `useRouter()` to navigate the buttons to its corresponding pages. {: .prompt-warning } {: .blur } ## Loading State When you have Service Side Components, the entire webpage renders **on the server**. The main problem with this is: *If the content is not ready, what do we show the user?* NextJS has a very simple and easy way to solve this issue; you can make a **static loading page**. - If you have a SSR Component, in the **same folder**, make a `loading.js` file - This `loading.js` file needs to be **static** so they can be ready right when someone loads the page. This implementation is super simple, this is what your file tree should look like. ``` my-app/ ├── node_modules/ ├── public/ ├── src/ │ └── app/ │ ├── favicon.ico │ ├── globals.css │ ├── layout.js │ ├── page.js │ ├── search/ │ │ └── [searchId]/ │ │ ├── page.js │ │ └── loading.js │ ├── video/ │ │ └── [videoId]/ │ │ └── page.js │ └── playlist/ │ └── [playlistId]/ │ ├── page.js │ └── loading.js ├── .gitignore ├── eslint.config.mjs ├── jsconfig.json ├── next.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.js └── README.md ``` Feel free to make your own `loading.js`, but if you don't want to, here is what mine looks like: ```jsx export default function Loading() { return (

Loading...

); } ``` *That is all for this section of the tutorial!* Part 2 is already posted, so whenever feel free to start it whenever you are ready. If you made it this far, thank you and I hope this tutorial has helped you get a decent start with NextJS!

Educational

Recently Opened

FocusTube

FocusTube pt. 1