From the course: The Freelance Stack: Real Project with Next.js and Strapi

What is the freelance stack? - Next.js Tutorial

From the course: The Freelance Stack: Real Project with Next.js and Strapi

Start my 1-month free trial Buy for my team

What is the freelance stack?

“

The stack that we'll be using for our project, it consists of two main parts. The first one is on the front and we'll be using Next.js that will be then connected to our back-end or headless CMS Strapi which will be simultaneously pretty much the admin panel for our client where they can update, integrate and so on any data they want to show on the website. Now on one hand side or the first question is obviously why am I calling this the freelance stack and I call it that because to me over the last three years with any client that I have this would fulfill the requirements they had and what are those requirements well basically most of the time they want to be able to continuously update their website without constantly having to go back to me and ask me to update the code. Now with Strapi what they get is a whole admin panel that we can also look at here from which side they can easily update any content on the website. On the other hand then it's important that we have a front-end framework that can consume that data so that we basically fish all the data that whenever the client updates anything we can get that data through an API easily and then regenerate the website on the fly with the new data. And then Next.js has a very big advantage here, which is it sort of combines the best of React.js and on the other hand server-side rendering. We're going to talk a lot more about this during the crash course of Next.js, but for now I'm just going to show you this here is the hosted website that you're going to create at the end of it. And it contains things like a fully customizable blog right here, and you also see that when I switch around from side to side there's no loading time at all. It works pretty much like a single page application, or it is a single page application. If I click on read more here, you're going to see the whole article pop up in no time at all. And this article here is actually being published on Strapi. So for example in Strapi we have blog articles right here and then in here this is exactly the article and that article is being exposed by an API and I hope by now you can already see the kind of power we have with this. Now if we look back into XcaliDraw right here, I drew up the different components and just to showcase you how much simpler it is with the stack that I'm showing you, in the new stack what we have is we have on one hand side the front end and on the other hand we have the back end and API and the admin panel right the place where your client will go into to change any of the data that is one that is Strapi and Strapi automatically creates those API endpoints as soon as we create the different content types and you're going to learn all about that but the way it works here is just that our front end will be just easily making API requests to to Strapi so So it's going to say, get blog articles, for example. And Strapi, on the other hand, handles all the data input. It also handles media upload, right? So here as well, what I haven't even put into this, what I haven't added, but it is there, is an additional media library as well. Because also the images will be stored by Strapi. So all three of those things will be just within our headless CMS. We just have to learn how to properly use that. Now, you're obviously seeing here, there's quite a bit of design involved as well with our page. In order for us to actually simulate the proper freelance workflow, we have a Figma file set in front of this. So pretty much the workflow for us is that we're first going from Figma to our front-end framework, and then we're gonna add this data from Strapi into the created design. So usually the way it works is you're going to get a file just like that here. And on that file, you can then look closer into the different stylings into the different margins, everything here that you need. And then from there, build your next JS application. So that's exactly how we're going to structure it as well. And maybe just as comparison, if we wanted to build this by ourselves, instead of using Strapi, right? The additional effort we have to make, we would first of all still have the front end of a website on one hand, but the admin panel and the backend and the API and everything, right? That will be split up. So this here, this would here be the admin panel front end. We would have to build a whole nother react application, next JS application, whatever. We would have to take care of all the data input that comes from the admin panel over here. And by the way, that admin panel would be a whole design on its own, right? have to create another design for how is the user actually going to enter the data and then our back end is going to be in between. Instead we literally have the user interface already right that's what I've shown you here for the admin panel from here we can create new data we can update data and then our page will pull all of that information in. So that is the stack we're going to be using for the project. I can get rid of this overly complicated one at the bottom and instead this is everything you need to know. And I hope you now understand the power of this stack of having a framework that can server-side generate pages that have been created on a headless CMS. And by the way, if you go through this course and you understand the underlying principles, you can switch out the different frameworks here as well, right? There's multiple different ones like if you're for example wanting to go to Vue you could use Nuxt, on the other hand here for Strapi there's stuff like Contentful and other CMS, it doesn't matter but the main thing you need to understand is what is the power, what is the concept of this freelance stack where you can basically fetch data from a panel that is easy to use for people that have no idea how to code. And that's exactly what Strapi gives you. And on the other hand, Next.js gives you that lightning fast, front-end speed and full flexibility while developing.

Contents