Introduction: Building a Movie Database with Next.js and Strapi
So, depending on where you are in the world and when you are watching this video, there is a very high probability that you need to stay home, that your government orders you to stay home. And if it did, please do so. We all got to do a part in stopping this from spreading. So since you are already home, there is no better time to learn something new. And since you are on this video, you probably wanted to learn something about Next.js. So in this series, we are going to take Strapi and use it as a CMS or our back-end, which we are going to fill with information. And then we are going to use Next.js as our front-end to display that information to our users. That is what we are going to be doing in this series.
I just want to talk about Strapi for a little bit. We covered Strapi on this channel already in one video and we created this. So as you can see, this is kind of a movie database, and that's what we are going to be doing in this series. We are going to create a website that is going to be kind of a movie database, like we always do on this channel. What this means is we already have our back-end covered. So I want you to go and take a look at that Strapi video that I did. I'm going to put a link in the description and also a link in the cards. Go take a look at this that video, and when you finish with that video, if you haven't already, you will be left with something like this. So you are going to have your actors, your movies, and then you're going to have this API that we can use with Next.js to display all of that information.
What is Next.js?
This series is not going to be focused around Strapi practically at all. We are going to be of course using it and probably adding some things to it, but the main focus of this series is going to be on Next.js. So that brings us to the question: what the hell is Next.js?
Well, Next.js is the React framework for making SEO-friendly websites, PWAs, Electron apps, and so on. As you can see, you can make a lot of stuff with Next.js, but in this series we are going to be focusing on creating a website, creating an SEO-friendly website, and creating a server-side rendered website. So we are going to be creating a normal kind of website that you can create with something like PHP, WordPress, and HTML, kind of, except we are just going to be using JavaScript, React, and Next.js.
Also, there is one more thing I want to mention, and that is that we already looked at this sort of frameworks before on this channel when we were using Sapper for Svelte and Nuxt.js for Vue. Especially Vue, as you will see, is pretty much a copy of Next.js just made for Vue. And all those frameworks actually took ideas from Next.js because Next.js was the first and I think currently the best framework of this kind, but it's made just for React.
Installing Next.js
So in this episode, we're of course going to install Next.js, and I'm also going to show you some of the things that I would do immediately after installing it: adding some files, adding some directories, and so on. Because as you will see, Next.js is pretty bare-bones when you just install it, which I actually kind of like because you will just add to it things that you really need. So it does come with a lot of stuff out of the box, but you can easily integrate whatever you like in it.
Okay, so this was a long intro and I hate doing intros. It took me I think about an hour to record all of this up to this point. So let's just get to work. That's much easier for me to do. So if you go to the getting started page of Next.js, you will see this setup right here. And I think somebody screwed this up because it says, "We recommend creating a new Next.js app using create-next-app," which we are going to be doing, "which sets up everything automatically for you. To create a project, run npm init next-app." Well, this is not going to do anything. This is going to initialize package.json for you. So I'm going to show you the right way. As I said, I think this is kind of a screw up or somebody didn't update the documentation accordingly. So anyway, to install Next.js, it's very easy. You just go to a console where you want to install it and you just do npx create-next-app. That's it. And then it's going to ask you for the project name. I'm going to call it nextjs-strapi. And now, npx is going to install everything for you.
Running the Dev Server and Exploring the File Structure
Now, once the installation is finished, you just cd into a project, in our case nextjs-strapi, and run npm run dev. This is going to start the development server on localhost:3000, and you can take a look at that in your browser. So when you go to localhost:3000, you should be greeted with a page like this. Now we are going to open Next.js in our code editor. Now in a code editor, we can see what Next.js looks like, what is its directory structure. And as you can see, you have this .next directory, and this is where Next.js is going to compile everything, do some temporary things, and so on. What you want to do with this if you're using something like PhpStorm or WebStorm, you want to actually exclude this directory because you don't want your code editor to look for anything in here, because you don't ever want to do anything in this directory. This is just strictly made for Next.js use, and you don't change anything in here. So I'm just going to right-click on it and at least in PhpStorm you can do this, you can just exclude either that directory from being indexed.
Next, you have node_modules, of course, there are just Node modules. You have pages, and currently I have this index.js. So this is the site, this is the page that we currently are looking at if we go to our browser. So if we go here, this is that index.js, so just an informational page about Next.js and your starting page. So this is the entry point to our site. Next, you have public directory, and in that public directory, you put favicons, you put your images, you put your fonts, and so on. So this is made for your static assets. And that's about it, right? As you can see, there is just a .gitignore, package.json, and README file, nothing else. This is the whole installation of Next.js. As I said, Next.js doesn't come with much stuff out of the box, but we are going to be adding some stuff to it as we go along through this series, and even in this episode, we are going to add some stuff to Next.js.
Demonstrating File-Based Routing
So just like in Sapper or Nuxt.js, whatever you put in this pages folder is automatically going to get routed to the right route, right? So the router is automatically going to work for you. I'm just going to show you right now how to handle static routes, and of course later on in the series, we are going to be discussing dynamic routes also. But for now, let's just create an about page. So if you go to pages and you just create about.js, and since everything in React is a component, we are just going to add a component right here and export it. Okay, so this is our function or our functional component. It just says, "I'm an about page," and then we would just want to export it. Save this, go to our website, and if you go to /about, it's going to say, "I'm an about page."
So this is the way that Next.js and all those other frameworks work. So this is the way that you would create new routes or a new page or add new pages to your site. You just have to remember this is just a normal component, but you just have to put it into the pages folder.
Using a Custom _app.js for Shared Layouts
So one of the things that I would probably add to every application when working with Next.js or to every website is a custom _app.js file. So _app.js is going to be kind of a wrapper around all of our components. So think of it something like this. So every site has a header, right? And where do you want to put that header?
The way that our application or our website is structured right now, for every page, you would have to put a header, right? If you go to index.js, you will have to put a header somewhere around here. So right here, right? Also, the same thing goes for the about page. So of course, we don't want to do that. We want to put a header in one file and we want to show it everywhere. So that's one of the uses for the custom _app.js file. So you can go just right here, just copy all of this, go to our browser and we are going to create _app.js. So actually, _app.js, and I'm just going to paste all of this in, also delete all the comments. We are not going to worry about that right now, and that's about it, right?
So instead of just having this component right here, what we can do is something like this. So we are going to return this empty tag. So this is a React fragment, which is just a way of saying to React, "Okay, so I want to display something here, but I don't want to wrap it in any sort of div or anything." So you can do this, and then I'm just going to say, "I am a header," and everything else. So on every page, every page that we go to is going to display its content right here where it says Component.
So if we now go to our site... actually, I think we are going to have to restart our server. So let's just do that. So I'm just going to restart our server right now and start it again. So it's going to say, "I am a header" right here. And if I go back to our localhost, it's also going to display "I'm a header" here. So "I'm a header" is going to now be available on all of our pages. Of course you don't want to just say "I'm a header"; you want to create a component that is going to be a header for your site. So that's what we are going to be doing right now.
Creating and Importing a Header Component
So now I'm going to create a components directory, and it's going to be in the root of my project. And now right here, I can add another component, which I'm going to call, of course, Header, so Header.js with a capital H. And in it, I'm just going to create a function that is going to return some text, and that text is going to be wrapped in a <header> tag. And now of course, we need to just export this function. Okay, great.
Now we can go to our _app.js file, and in it, we want to import that header. And we are going to import it from components/Header. And now I'm going to add it here instead of this p tag that says "I'm a header". Save this, take a look at our site now, right? And it says automatically right here, "Now I am a real header." If we go to our about page, we should also get that same text. Great.
Implementing a Custom _document.js
Now the next thing that we want to add is document.js. So this is also a custom document feature, right? Custom document. And in it, you would add something like maybe a link to a CSS, your SEO for the site, right? So you would add... you'd add Open Graph tags there, you would add your metadata there, and so on, right? It's going to be a wrapper just like the _app.js, but it's going to be a wrap around the whole of your site. As you can see right here, we are going to add HTML, head, and then the body, and so on. So we are also going to just copy this and add document.js to our website. And later on in the series, we will use it to actually make our site SEO friendly.
So in our pages folder, we just create a new file, and we are going to call that file _document.js, and I'm just going to paste in the content from the documentation of Next.js. Okay, so this is our document.js. I'm just going to save this, go to the server, and restart it. Let's just take a look at our site now and see if everything works. Everything seems to be fine. We didn't get any visual representation of that _document.js, but what I want to do actually is I want to go to my editor, and if you go to the index.js, you will see this Head. This Head is actually usually meant to be in document.js. So I'm going to remove it from here, and I also don't need this Head import right here because that's just the head of your website. And if you go to document.js, as you can see, we have Head right here. So I'm just going to paste the <Head> that I removed from index.js right here. In the future episode, we are going to play around a little bit with this so that we have dynamic titles, that we have our favicons, and so on. Take a look at our site, everything works. So everything is great right here.
Configuring Path Aliases in next.config.js
And I'm just going to want to show you just one more thing, and that is next.config.js, because Next.js out-of-the-box doesn't even come with that, so its own configuration file, but you can of course add it to your application and change the configuration to your liking. We are not going to do much with this in this episode at least, but I'm just going to show you one cool thing that is going to make our life just a little bit easier when creating Next.js websites.
So now in the root of our project, we are going to create a file called next.config.js, and I'm just going to paste some code in it, and I'm going to explain what it does. So we are defining, we are actually configuring our webpack in this case to resolve these aliases for components and for public. This is going to allow us to much easily call our own components or something from the public directory. Of course, later on, we can add more aliases to this file, but for now we are just going to leave this webpack config to be very simple, so just for the public and just for the components. I'm going to save this, and now of course we need to restart our server. As you can see, we are getting a warning that title shouldn't be in the document.js. I forgot about that. I shouldn't have left it there because of course every page on your site is going to have a different title. You don't want the title to be exactly the same for every page. But we are going to deal with this once we get to the SEO part of this series. But for now I'm just going to restart our server, and I'm going to show you what that configuration in the next.config.js actually does.
Okay, now let's go to our _app.js and instead of writing header from ../../components, we can now write just components/Header. And if you're using something like PhpStorm... I don't know how this is set up in other editors, but in PhpStorm you can just start writing components and it's automatically going to pick up that configuration for you. And you could say components/Header, and that's it. So this is just a quality of life improvement when creating your websites. And now if I save this and go to our page, as you can see, everything still works even though we didn't write the relative path from our _app.js to the components.
Conclusion
Okay, so this is it for this intro video. I hope you get the idea of what Next.js is and what we are going to be doing. Of course, remember everything we did here will be available for you on GitHub. The link will be in the description below. And as always, thank you guys for watching and I will see you in the next one. Also, please stay at home if your government says to stay at home, just do it.
