Building my first Next.js app

Next.js 9.4 introduces React Fast Refresh, Incremental Static Regeneration, New Environment Support, Built-in Fetch, and more!

Next.js 9.4

In this video you will learn how to connect a Next app hosted in a Git repository to AWS using Amplify Hosting. You'll then learn how to kick off a new build by pushing changes to your master branch.

Deploying a NextJS app to AWS with AWS Amplify Git-based deployments

In this tutorial you'll learn how to deploy a NextJS app to AWS using Amplify Hosting using the Amplify CLI.

Deploying a Next app with the AWS Amplify CLI

This is an example of how to do routing as a modal in Next.js, where when the user clicks a link, content is shown within a modal, but when the user refreshes the page, they are on a dedicated page for that content. This is a technique used by both Instagram and Reddit.

In the process we'll learn about the Next.js router and how to do dynamic linking.

Source Code
https://github.com/leighhalliday/next-route-modal-demo

Next.js example
https://github.com/zeit/next.js/tree/canary/examples/with-route-as-modal

Next.js Link
https://nextjs.org/docs/api-reference/next/link

Next.js Router
https://nextjs.org/docs/api-reference/next/router

Learn JavaScript, React & more with Treehouse (affiliate link)
https://treehouse.7eer.net/c/1214671/228915/3944

Instagram Style Route as Modal in Next.js

Fetch your props directly from the Database?!?! Adam Wathan showed a simple example of loading props directly from the database: https://twitter.com/adamwathan/status/1246144545361997829 

In this video we'll explore this hook, along with two others for building static pages. Next.js 9.3 came out with 3 new hooks that allow you to fetch data in different ways:
- getServerSideProps: Fetch data server side
- getStaticPaths: Fetch data to generate static pages
- getStaticProps: Fetch data to build a static page

Links:
- Source code: https://github.com/leighhalliday/nextjs-hooks-database
- Deployed app: https://next-hooks-database.now.sh/
- Full Stack Radio episode about Next.js: http://www.fullstackradio.com/137
- Release notes for Next.js 9.3: https://nextjs.org/blog/next-9-3
- Learn JavaScript, React & more with Treehouse (affiliate link): https://treehouse.7eer.net/c/1214671/228915/3944

Corrections:
- useSWR doesn't return `loading`... it does return `error` though, which I should have used. Got too used to Apollo :)

Fetch props directly from the Database?!?! New Hooks in Next.js 9.3!

Making Websites With Next.js And Strapi

In this first episode of "Making Websites With Next.js and Strapi" series we are going to setup Next.js and I'm going to show you what to immediately after install to make your life easier.

As for Strapi, we are not going to install it in this video, instead we will use the installation that we already made in the video where we have taken a look at Strapi(https://bit.ly/3bhDMCC), so if you haven't already checked out that video please do so before beginning with this series, because we will be using Strapi as our CMS and API.

Also, since Next.js is framework for #React, and if you don't know anything about React please check out my React 2020(http://bit.ly/39K0Ee3) series before starting with this one, because we will be using concepts that we covered in that series.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this episode

https://bit.ly/2WMuryy

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Making Websites With #Next.js And #Strapi - [01] - Setup And First Steps

In this video we are going to be talking about CSS in JS, which is a different kind of approach of styling your applications and websites.

We are going to install Emotion library that is going to handle CSS in JS for us, through styled components and through our sites CSS theme. As you will see this is all pretty easy to setup, and the advantages of using this approach are numerous and pretty significant as you will see in this video.

Along with Emotion, we are also going to take a look at a very nice helpers library called Polished. Polished is going to make our stylings easier with an assortment of very helpful functions.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this video

https://bit.ly/2Uq2VW9

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Making Websites With #Next.js And #Strapi - [02] - CSS in JS (#jss)

In this episode we are going to learn about #getServerSideProps() async function in which we are going to #fetch our data, and Server Side Render it.

I'm also going to show you how to use `.env` file to setup global variables that you can use throughout your application, be it on your production environment or development environment. That `.env` file is going to hold address to our API that we are going to access through `getServerSideProps()` so that we can SSR our pages, on user request.

After we fetch our data, I'm going to show you how to display it through a Card component, and then style it a little bit so that it looks nice.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this video

https://bit.ly/39FTqqp

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Making Websites With #Next.js And #Strapi - [03] - Fetching Data

In this episode we are going to learn how to layout your #React components using Reflexbox.

Reflexbox is part of Rebass UI React components. These components are built for styled systems like Emotion, that we are using in this series. We are going to use just the Reflexbox part of Rebass, and Reflexbox is - "Ergonomic, responsive React layout and grid system" - as it's written in their documentation.

We are using it so that we don't need to polute our Next.js pages with unnecessary CSS just to layout our components. But you can of course use Reflexbox even inside your components, if you really need and want to. 

As you will see Reflexbox is very powerfull and flexible, and can be used on any React based project that uses styled system.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this video

https://bit.ly/2XqmZtk

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Making Websites With #Next.js And #Strapi - [04] - Layouts With #Reflexbox

In this episode we are going to talk about Next.js #Routing, Nested Routes, Link component and we are also going to create a dynamic #Navigation for our Next site.

We will actually cover a lot of stuff in this episode. First of all I'm going to show you how to create normal and nested routes (however we are not going to learn about dynamic routes in this episode). Then I will show you how to use Nexts *Link* component. Then we are going to create our own Navigation component that will link our site together and also how to make those links give visual feedback to the user, so that the user knows on which page he or she is currently on.

This Navigation is going to be hard coded, which is not ideal, so we are going to create that navigation in Strapi, and make it dynamic so that we don't have to hard code it, cool.

Also you are going to learn the difference between `getInitialProps()` and `getServerSideProps` and how to correctly get environment variables with `getConfig()`.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this video

https://bit.ly/3jqMyTv

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Making Websites With #Next.js And Strapi - [05] - Static Routes, Nested Routes & Navigation

In this episode I'm going to show you how to create simple and then more advanced dynamic #routes for your #Nextjs and #Strapi application.

We are going to start by creating a simple dynamic route that is going to fetch our singular data by `id`. After that I'm going to show you how you can fetch your data by using `slug`instead of `id` so that your singular data has pretty URLs. And lastly we are going to create a bit more complicated routes that is going to include categorisation of our routes. 

As you will see this is all pretty easy to do with our Strapi, Next and React stack.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this tutorial

https://bit.ly/3bEKbbx

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Making Websites With Next.js And Strapi - [06] - Dynamic Routes

In this episode we are going to learn how to create a #pagination for our #Nextjs and #Strapi website.

Strapi will provide us with some valuable data and filters which will make creating our pagination very simple. Specificaly we will get number of items from Strapi and use it's `_limit` and `_start` filters. This information will allow us to calculate pagination using simple JavaScript, Next.js and of course React.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in the video

https://bit.ly/3cjm3f8

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Making Websites With Next.js And Strapi - [07] - Pagination

In this episode you are going to learn how to implement SEO on your Next.js website.

To implement SEO on our #Nextjs and #Strapi website we are going to be using Next #SEO (https://github.com/garmeeh/next-seo) plugin. This plugin is very easy to add to your Next.js project and very easy to use as you will see in this video.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this video

https://bit.ly/3ebtJk8

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Making Websites With Next.js And Strapi - [08] - Next SEO

In this episode we are going to use #React Context API to get the data for our navigation and also to create a simple state management.

Currently we are passing the data to the navigation component with prop drilling. Nothing wrong with that, but sometimes that can get pretty complex so you have to use other strategies to get the data from one component to another. That is why we are going to use #ContextAPI in this episode, and get rid of prop drilling to get the data to our navigation component. Also I'm going to show you how to create simple #state management using Context API.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this video

https://bit.ly/2Uz7gpV

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Making Websites With Next.js And Strapi - [09] - Using Context API

In this episode we are going to deploy our #Next.js App and #Strapi API to #DigitalOcean.

An we are going to do it by using #OpenLiteSpeed image. That image is going to create a server and administration panel for us so that we don't have to do everything manually. It will also setup basic security for us too.

Also be sure to use my referral link to get $100 for 60 days in Digital Ocean credit, so that you can tinker around with deploying your apps and Digital Ocean in general.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Digital Ocean Referral 

https://bit.ly/30yBKfm

### Documentation used for this video

https://bit.ly/3dZF07e
https://bit.ly/37n3bdo
https://bit.ly/2YuGIXH
https://bit.ly/2zqvTNY
https://bit.ly/3dXadbm

### Code used in this video

https://bit.ly/2MP1nQY

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Making Websites With Next.js And Strapi - [10] - Deploying To Digital Ocean

In this episode I'm going to show you the difference between #getServerSideProps and #getStaticProps in #Next.js

In #Strapi we are going to create pages content type so that we can get the data for our pages from the API instead of hard coding them. For getting those pages in Next.js we are going to be using `getStaticProps` instead of `getServerSideProps` because we want our pages to be statically generated and to not require any additional requests. Also I'm going to show you the difference between those two types of fetching data.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this video

https://bit.ly/3fKPFn2

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Making Websites With Next.js And Strapi - [11] - getStaticProps

In this episode we are going to talk about new feature in #Next.js 9.5 called Incremental Static Regeneration.

So in the last episode told you that once you use #getStaticProps your content will not be dynamic, meaning that you would have to rebuild your site every time content from `getStaticProps` changes. Well, since Next.js is developing very fast, this is already not true any more.

So in this episode I'm going to show you how you can use `getStaticProps` and still have your content change if you update it in #Strapi. So you get the best of both worlds. Yay!

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this video

https://bit.ly/3k1mBdJ

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Making Websites With Next.js And Strapi - [12] - Incremental Static Regeneration

In this episode we are going to make our #Nextjs and #Strapi site be multilingual.

Now I'm going to show you how to make your Next.js and Strapi site handle multiple languages. We are going to do this by using next-i18next plugin that is using i18next and react-i18next plugins under the hood. #i18n

So I'm going to show you how to handle namespaces, how to use translation strings, how to create a language switcher and how to fake multi language support in Strapi. And at the end of the video our site should have full multilingual support.

### Code used in the video

https://bit.ly/3kw8zkO

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Next.js - Multi Language

In this episode we are going to create user authentication for our #Nextjs and #Strapi website using JSON Web Tokens or #JWT

In this a bit longer episode we are going to take a look at user authentication that comes with Strapi, and we are going to learn how to implement it into our Next.js app. This is not very hard to do once you undertand the logic behind it and learn how to use JWT (JSON Web Tokens) for authenticating your users.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this video

https://bit.ly/2DbbA9h

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Next.js + Strapi - User Authentication

In this episode we are going to add some new movies to our site but using the frontend form instead of #Strapi administration.

This will be a very nice feature especially if you are building a site where users can add new content to the site. And as you will see in this episode Strapi makes this very easy for us to do, most of the code will actually be implemented on the #Nextjs side of things.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this video

https://bit.ly/33qazTR

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Next.js + Strapi - Add Data To Strapi From Next.js

In this episode we are going to take quick a look at new Image component in Next.js 10 and learn how to add additional data to our Strapi response.

Next.js 10 came out recently and it brought with it new out of the box #Image component. This component will make images on your site much more performat, smaller in size and they will be lazy loaded wich can add a lot of benefits to your sites perfomance with very little actual work from you.

However #Nextjs Image component has two required props, and those are width and height. Unfortunately #Strapi doesn't give us width and height of the images in our API out of the box. So we would have to customize our response to include those values. And in Strapi this is a peice of cake.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this video

https://bit.ly/2VeR3WD

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Next.js + Strapi - Image Component And Customizing Strapi Response

Learn how to use static site generation in Next.js in this tutorial where I show you how you can setup.

Code: https://github.com/benawad/test-nextjs-blog

Markdown posts:
https://raw.githubusercontent.com/benawad/test-nextjs-blog/master/posts/faq.md
https://raw.githubusercontent.com/benawad/test-nextjs-blog/master/posts/docker-linux-access-localhost.md


----
Checkout my side projects:

If you're into cooking: https://www.mysaffronapp.com/

----
Join the Discord:  https://discord.gg/Vehs99V

----
Patreon: https://www.patreon.com/benawad

----
Follow Me Online Here:

Twitter: https://twitter.com/benawad
Twitch: https://www.twitch.tv/benawad
GitHub: https://github.com/benawad
LinkedIn: https://www.linkedin.com/in/benawad/
Instagram: http://instagram.com/benawad97
#benawad
TikTok: https://www.tiktok.com/@benawad

Next.js Static Site Generation (SSG) Tutorial

On September 14, 2019, Stripe introduced a API for handling payments to comply with new European legislation. If you are already using Stripe, you've probably already heard of or even implemented Payment Intents.

Companies who don't follow the new changes may see transactions being declined by the bank, leaving customers in the dark and reduce sales. 📉

If your business is based in the European Economic Area or process payments for anybody who is, serve customers in the EEA and accept credit or debit cards, you will need to comply with the Strong Customer Authentication.

Due to the change in processing payments, it's not longer possible to just create payments on the frontend like you were used to previously. There now has to be a server element to creating payments with Stripe.

In this video, we'll explore how you can start using the new Stripe Payment Intents API with Next.js and follow best practices as set out by Stripe and the industry.

Dev.to guide: https://dev.to/notrab/working-with-stripe-payment-intents-and-next-js-106h

Stripe Payment Intents API with Next.js getServerSideProps

Next.js can now do static site generation along with server side rendering. I think Next.js will be become my default framework for making websites and I'll probably use Gatsby less.

----
Checkout my side projects:

If you're into cooking: https://www.mysaffronapp.com/

----
Join the Discord:  https://discord.gg/Vehs99V

----
Patreon: https://www.patreon.com/benawad

----
Follow Me Online Here:

Twitter: https://twitter.com/benawad
Twitch: https://www.twitch.tv/benawad
GitHub: https://github.com/benawad
LinkedIn: https://www.linkedin.com/in/benawad/
Instagram: http://instagram.com/benawad97
#benawad
TikTok: https://www.tiktok.com/@benawad

Building my first Next.js app

Next.js 9.4 (nextjs.org)

Deploying a NextJS app to AWS with AWS Amplify Git-based deployments

Deploying a Next app with the AWS Amplify CLI

Instagram Style Route as Modal in Next.js

Fetch props directly from the Database?!?! New Hooks in Next.js 9.3!

Making Websites With Next.js And Strapi March 24th, 2020

Making Websites With #Next.js And #Strapi - [01] ...

Making Websites With #Next.js And #Strapi - [02] ...

Making Websites With #Next.js And #Strapi - [03] ...

Making Websites With #Next.js And #Strapi - [04] ...

Making Websites With #Next.js And Strapi - [05] ...

Making Websites With Next.js And Strapi - [06] - ...

Making Websites With Next.js And Strapi - [07] - ...

Making Websites With Next.js And Strapi - [07] - ...

Making Websites With Next.js And Strapi - [08] - ...

Making Websites With Next.js And Strapi - [09] - ...

Making Websites With Next.js And Strapi - [10] - ...

Making Websites With Next.js And Strapi - [11] - ...

Making Websites With Next.js And Strapi - [11] - ...

Making Websites With Next.js And Strapi - [12] - ...

Next.js - Multi Language

Next.js + Strapi - User Authentication

Next.js + Strapi - Add Data To Strapi From Next.js

Next.js + Strapi - Image Component And ...

Next.js Static Site Generation (SSG) Tutorial

Stripe Payment Intents API with Next.js getServerSideProps

Next.js Static Site Generation (SSG)