Introduction & Project Demo: Summarize AI
Hello, you wonderful people. I'm excited to start this new series on an epic Next.js course by building a real-life project. If you wanted to jump into all the features of Next.js 14 and you were curious where to start, this video is for you. So without any ado, what are we going to build?
So I love watching YouTube videos, but some videos just take too long to watch. Wouldn't it be awesome if there's a way that I could just summarize the videos and take notes on them? Well, this is where this project that we're building comes in. We're going to build Summarize AI, which will have authentication, so your users will be able to log in or create users. I already have a user account, so I am just going to log in.
Once you're logged in, you're going to be greeted by this dashboard area where you're going to see credits remaining, total summaries you have, and notes that you took. You will also be able to go to your account section and update your user profile as well as see credits that you have available. And more importantly, you'll be able to add a video URL and summarize it. So let's give it a try. I'm going to go ahead and post a URL to a video of Dan a Wildo, which is an amazing Strapi crash course that you could check out later.
Once our summary is complete, you'll be able to edit the summary, add the notes. For instance, I want to correct the spelling for Strapi. I could do that. And maybe I want to go ahead and move this to our title rather than being part of the actual summary. I could click update. It's going to go ahead and save everything to our Strapi backend. And when you're finding cool new things, you could actually while watching the video, you're like, you know what, this section is pretty cool, whatever he said here, maybe I should take a note here. And so we could say, this is our first note, and I'm going to say, I am a note. We're able to see our notes, and we're able to update and delete. So as you could see, we have full CRUD functionality in our app.
I hope you're excited to build this app with me together.
Course Outline & Technology Stack
The cool part about the series, I'm going to be building this application with you in public. So you'll be able to follow along with the repo. There's also going to be a complimentary blog post that you'll be able to check out to see what we've built in that particular lesson. So today, we're going to start by setting up our initial project with the technologies that we're going to use.
Primarily, we're going to focus on Next.js. The goal of this tutorial is to introduce you to all the amazing features that Next.js 14 has in store for you. We're going to make sure that we're going to use our Next.js website and make sure that we're covering all the topics that are available to you to make sure that you're able to build cool things with Next.js.
In the process of learning Next.js combined with Strapi, we're going to learn about the most important features that Next.js has to offer, like using the new app directory folder, of course working with nested layouts, data fetching, caching, and working with server and client components, as well as learning how to submit forms with server actions. But because we're also building with Strapi, we're going to learn on how to build our collection types, content types in Strapi, as well as how to customize our back end with middlewares, policies, and custom controllers that we're going to use to get our summary from OpenAI.
And to style our application, we're going to go ahead with Shadcn UI, which gives us amazing components that we could use in our code. So without any ado, let's get started.
Setting Up the Next.js 14 Project
To get started, we're going to install Next.js 14 right away. You could look at Next.js documentation, and we're going to start by running npx create-next-app@latest.
So inside our terminal, the first thing I'm going to do is make a directory for our project. We're going to call it epic-next-course, and we're going to CD into our project directory. I'm going to clear the screen, and we're going to run npx create-next-app@latest. It's going to go ahead and ask some questions. We're going to call our application frontend. Yes, you're going to use TypeScript. No to lint. Yes to Tailwind. Let's use the src directory. Let's use the App Router. Let's say no for import alias. And it's going to go ahead and create our project, which is fantastic.
Once we successfully installed our project, let's CD into our frontend, open it in our favorite code editor, which is obviously VS Code, and we're going to give it a nice color of this crazy red. And if we run yarn dev to start our application and navigate to localhost:3001, because apparently I already have a project running, let's see what we get. And boom, we have our basic Next application set up and ready to go.
Initializing Shadcn/UI for Styling
So now let's go ahead and install Shadcn UI and connect our very first component. You could navigate to ui.shadcn.com. If you click the docs on the installation tab, it's going to show you a couple of different ways to install it. Of course, we're going to click Next.js. We already have our project set up, so the first thing we're going to do is initialize our project by running the following command. So I'm going to go ahead and copy, let's stop our development server. Let me clear the screen, and we're going to initialize Shadcn UI.
It's going to walk us through some questions. We're going to say default, we're going to use slate for our base color, yes for CSS variables. It's going to go ahead and do its magic. If we take a look in our project under our tailwind.config.js file, notice all of these options that have been created for us with Shadcn UI. So now that we are set up, let's install our first component.
We're going to navigate here and we're going to see that we are able to install a component locally by running npx shadcn/ui@latest add and the component we want, which is our button. What I love about Shadcn UI, as you will see, it will install that component to our code base locally, where we could extend it or modify it as we want to.
Adding and Using the First UI Component
So in our terminal, we're going to add our button. Once this is all set, inside our code base, we could navigate to our src folder, and we're going to have our components, and notice how now we have a new ui folder. And if we look, take a look, we could see all of our button code that has been installed.
So now let's go ahead and use our button. We're going to navigate to our app folder, our page and we're going to replace the following code with our button here. So I'm going to go ahead and delete all of this code in main. I'm going to remove this image import and first I'm going to import our button, and it's going to come from @/components/ui/button. and I'm just going to add it here. So here we are, we're using our Shadcn button. Let's see if it works.
I'm going to restart our project by running yarn dev. Let's refresh and boom, we have our new cool button and we know Shadcn UI has been installed correctly.
Setting Up the Strapi Backend
So now let's go ahead and install our back end with Strapi. To install Strapi, you could go ahead to strapi.io and copy this command npx create-strapi-app@latest. You could also click on get started button which will take you to our documentation. So in our terminal, I'm going to CD to the root of our project. I'm going to clear our screen and we're going to run npx create-strapi-app@latest and we're going to call it backend and we're going to use the quick start command. This will go ahead and set up Strapi for us.
Once Strapi has successfully installed, you'll be greeted by this registration page. Go ahead and create your first admin user. So let's say [email protected] and a secure password which is obviously monkey1234. And once you create your first user admin, you're going to be greeted with the Strapi dashboard.
Creating Your First Content Type in Strapi
Throughout this tutorial, we'll cover all the different sections of our Strapi application, but for today, I just want to get started really quickly. So let's go ahead and create our very first single collection type. So taking a look at our homepage in our application, we have our top navigation, we have our bottom navigation, and then we have our hero section and our features.
So let's go ahead and create our first single collection type to hold the data for our hero section and our benefits. So inside of our Strapi application, let's navigate to Content-Type Builder. We're going to create a single type. Click on create new single type, and we're going to call it Homepage. Click continue. And just to get us started, we're going to have a text field, and we're going to call it title. And we're going to click add another field, again, click text field, and we're going to have description. And as we continue building out this application, we'll add all the necessary sections, but for now, we're going to keep it simple. And let's make this description long text. When we click finish, we're going to click save.
Now we're able to go to our content manager, and we have our homepage. So let's go ahead and add our title. I'm going to say "Homepage", and for description, "This is our first page." I'm going to click save and publish. Now what we want to do is to give access to our Strapi endpoint to allow us to get this data through our API access. So I'm going to go to settings. Since this is going to be open to the public, on the users permissions plugin, click roles, click on public, and for homepage, we are going to go ahead and enable this find checkbox. And this is the endpoint to which we'll be able to make our get request. So I'm going to go ahead and save. Let's test our API in Insomnia.
Fetching Strapi Data in Next.js
Inside Insomnia, I created a new request. It's going to be a GET request, and it's going to go to http://localhost:1337/api/homepage. And I put an extra slash there. When we click send, notice we are able to get our data from our endpoint. Fantastic. So now let's go ahead how we could fetch our data in our Next.js application.
So I'm going to keep my Strapi instance running and I'm going to open a new shell tab. I'm going to CD into our epic-next-course folder, CD into our frontend project, and I'm going to go ahead and open it in VS code. And now what we're going to do, we're going to navigate to our src/app/page.tsx file where we added this button. What's awesome, because we're using Next.js and we have the ability to use React server components, we are actually able to make this async and call a function within our component to get our data. So let's go ahead and do that. We're going to create a simple function called getStrapiData where we're going to make a request to our Strapi endpoint. We're going to use fetch and we're going to call the base URL and then append our... and we could maybe call this path that probably makes more sense. And so we're going to say path here, and we're going to append the path to the data that we want to get. Now here inside our our Home function, we are able to call this component. So let's go ahead and console log our Strapi data. So let's make sure that our front end is running by running yarn dev. Let's navigate to our localhost:3000. We are still going to see our cool button, but you will also see that we're getting our console log, and you can see the data that we're getting.
By the way, if you're wondering how I'm able to get console logs in my console, it's because inside my VS code I have an extension called Console Ninja. And if you want similar functionality, you could do that as well. You will also be able to see this console log in our terminal. And here's the data that we're getting because this is running on the server.
So finally, let's consume this data and render it in our application. I'm going to go ahead and destructure our title and description from our data, and I'm going to remove this console log so it's not distracting. And inside our main, we're just going to add a simple H1 and a P tag, and we're going to display our title and description. So notice back in our application, we now see our homepage and this is our first page. Fantastic.
Recap and What's Coming Next
Wow, this is awesome. To summarize, we jump-started our project. We have our root folder called epic-next-course. If we take a look inside we now have our backend and our frontend. Our backend is powered by Strapi, our frontend is powered by Next.js, and most importantly today we saw how we are able to connect our application and get our initial data.
I know we're just starting out so there's still a lot of work left to do, but that's exactly what we're going to do in the next video. So tune in next week for the next video. We're going to show you how to build out your homepage, including the top navigation and the footer. But with that being said, thank you so much for joining us.
Follow us on our YouTube channel. And did you know that every Monday through Friday, either 6:00 a.m. CST time or 12:30 p.m. CST time, we have Strapi open office hours, which is a great place for you to join and ask your Strapi questions? But anyway, for today I want to bid you farewell, and I'll see you in the next one.
