lesson | egghead- lessonCreate a BlogList component in Next.jsWe'll start by creating a new folder and file `components/BlogList.js`. This component will be what we use to get data from Strapi as well as the current date to display on our home page.
We will have it display the slug, title, author, and published date with a link to each of the posts. We will also do some styling which will be quickly glossed over as the focus of the lesson is more on the data and not the styling but you can access the styles in the github link below.
Lastly, we'll import our component `BlogList` to our main `index.js` file and render it on the page.
- lessonBuild a Template for Dynamic PagesNow that we can query for the data and have it set up dynamically, we need to create a template page that will have our post data.
In the `[slug].js` file, we will add in our imports and create a function called `Blog`. In this function, we will render out a header that will have the title, author, and a link back to the home page. And lastly, we will render out the body of our post.
The last think we will want to do is add in some styling which you can get from the github link below.
- lessonCreate Next.js dynamic pagesOne of the main benefits of using Next.js is the smooth way to setup dynamic pages.
In our `pages` folder, create a new folder and file called `blog/[slug].js`. The brackets are what tell Next that the file is going to be a dynamic page.
Here we are going to use an almost duplicate `getStaticProps` function that we created in the previous lesson. The difference is we are going to be bringing in our page context to fill out the right page data.
Lastly, we will loop over all of our posts using a for loop.
- lessonQuerying the Strapi GraphQL APIGraphQL has an amazing plugin for Strapi to allow us to query our data easily. In the Strapi marketplace, we can search and copy the install command to use in our terminal. In our localhost, after restarting the server, navigate to the `/graphiql` endpoint to view and use the GraphQL playground.
- lessonQuery an entry from Strapi in Next.js using Apollo, cross-fetch, and GraphQLNow we are wanting to query that mock data in our application. We'll start off by installing `npm i @apollo/client cross-fetch graphql` in our Next.js application.
We will create a new function called [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching/get-static-props) which will do all of our fetching using Apollo and GraphQL.
- lessonCreating a Next.js projectFor our front end, we will be using Next.js. To create a new application, simply type `npx create-next-app client` in your terminal. We can `cd` into our project and run the dev server with `yarn dev`.
I'll also add some styling in the Home.module.css file that you can copy from the github link below.
- lessonCreating a Collection Type for Posts in StrapiNow that we've created our project, we need to set up our project to hold data. We will create a post collection type with all of the fields we want to have on our posts. With that created, we'll create a couple of mock posts for testing.
- lessonDeploy a Strapi Application to HerokuNow we have everything how we want it! Let's get our application deployed to production using Heroku.
First, we need to initialize our app and create a repo on github for it. We will be using Heroku in the command line. We will create our Heroku app, add our addons, and configure Heroku how we want.
Lastly, once everything is setup and configured, we push our changes and launch Heroku. `git push heroku HEAD:main`.
- lessonConfiguring API End User Permissions in StrapiWith our mock data setup, let's make some API calls to our Strapi project. We will need to set up our permissions so that only people we want to make requests can.
To make my API calls, I use the [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) in VSCode. We can currently make calls to our API without any authentication.
In our Strapi project, we can create API Tokens to make REST API calls for our data.
- lessonInstall and Use React Markdown in a Next.js ApplicationFor writing out the blog posts, it was done in markdown. Next.js doesn't automatically render markdown how we want it so we are going to install and use the package `react-markdown`.
In our `[slug].js` file, we import `ReactMarkdown` and replace the `p` tag for our body, where we are rendering the markdown, with `<ReactMarkdown>`.
The last thing we want to do is have it render pictures. Unfortunately, React Markdown doesn't automatically render images so we are going to setup Cloudinary in the next lesson.
- lessonCreate a Strapi Project From the TerminalTo create our Strapi project, run `npx create-strapi-app api --quickstart` in your terminal. This will launch Strapi in your browser and prompt you to create your first admin user. Tada! You've created your first Strapi project.
- lessonInstalling and Configuring the Strapi Cloudinary ProviderTo be able to render images in our markdown files, we are going to use Cloudinarly's provider on Strapi. In the Marketplace in our app on Strapi, we can copy the install command and use it in our app. `npm install @strapi/provider-upload-cloudinary`.
In our `config` folder, we will create a new `plugins.js` file and past in some code. (You'll be able to snag that from the github link below). We'll also setup our `env` folder for our cloudinary variables.
- lessonDeploy a Next.js Application to VercelWith our Strapi app deployed to Heroku, we need to deploy our front end. In this lesson, we are going to be deploying to Vercel.
Before we start on that, we are going to make some finishing touches, styling-wise, to our front end which will all be available in github.
Now we will create a repo to push our Next.js app to. On [vercel's](https://vercel.com/) site, we will create a new project and configure it to be a Next.js application as well as add in our environmental variables. Once that is done, our app will be live!
Thank you for watching my course on how to Build a Modern CMS Driven Web Application using Strapi and Next.js.
- lessonOrganize your Three.js Project - Part 3Refactor the Three.js camera into a factory function and handle Vite HMR cleanup with dispose methods to prevent WebGL leaks.
- lessonOrganize your Three.js Project - Part 2Refactor Three.js renderer into a factory function with dispose cleanup and a shared resize observer for a cleaner main.ts.
- lessonOrganize your Three.js Project - Part ILearn factory composition in Three.js: refactor messy main.ts into clean modules with a reusable resize observer utility for scalable 3D scenes.
- lessonDebug with TweakpaneIntegrate Tweakpane to create a live debug panel for scene parameters. Add controls for object position, rotation, and material color.
- lessonResize scene along with browser windowListen for window resize events to update the camera aspect ratio and renderer size. Prevent the scene from stretching or distorting.
- lessonAnimationsCreate a render loop using requestAnimationFrame and Three.js's Clock to animate objects smoothly.
- lessonRotating objectsUse the rotation property to rotate objects around the X, Y, and Z axes.
- lessonScaling objectsUse the scale property to resize objects along each axis independently. Learn that scale values are multipliers on the geometry's original dimensions.
- lessonTransform objects positionMove objects along the X, Y, and Z axes using the position property. Add an AxesHelper to stay oriented in 3D space, use position.set() to avoid verbose code.
- lessonCamera and RendererSet up a PerspectiveCamera by understanding FOV and aspect ratio, initialize a WebGLRenderer tied to a canvas element.
- lessonAdd objects to the sceneCreate a Mesh by combining a BoxGeometry with a MeshBasicMaterial, add it to the scene, and render it.