- Видео 65
- Просмотров 336 289
Coding Reflections
Индия
Добавлен 29 мар 2020
How to Upload Files into AWS S3 from Next.js [S3 Setup, Cloudfront, and AWS-SDK]
This video shows you how to setup an AWS S3 Bucket with Cloudfront CDN, then programmatically upload files into the bucket from a Next.js Application with the AWS SDK S3 Client package.
0:00 Introduction
1:00 Create Bucket
3:20 Setup Cloudfront Distribution
7:54 Custom Subdomain for Cloudfront with SSL
14:34 Creating IAM User
20:32 Next.js Application
22:46 Form Component
24:06 Generating access and secret keys
26:32 Server Actions for Handling Form Submission
29:21 UseFormState Hook for displaying form state
31:29 Installing AWS S3 Client
35:26 Testing File Upload
Website: codingreflections.com
---------------------------------------
Server providers:
Linode: codingreflections.com/go/linode/
DigitalOcean...
0:00 Introduction
1:00 Create Bucket
3:20 Setup Cloudfront Distribution
7:54 Custom Subdomain for Cloudfront with SSL
14:34 Creating IAM User
20:32 Next.js Application
22:46 Form Component
24:06 Generating access and secret keys
26:32 Server Actions for Handling Form Submission
29:21 UseFormState Hook for displaying form state
31:29 Installing AWS S3 Client
35:26 Testing File Upload
Website: codingreflections.com
---------------------------------------
Server providers:
Linode: codingreflections.com/go/linode/
DigitalOcean...
Просмотров: 2 296
Видео
Migrating a Headless WP Next.js Website from Pages Router to App Router
Просмотров 1,7 тыс.7 месяцев назад
This video shows you how I migrated a Next.js blog from the older Pages Router to the latest App Router, step-by-step. Website: codingreflections.com Server providers: Linode: codingreflections.com/go/linode/ DigitalOcean: codingreflections.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% acc...
Pages Router vs App Router in Next.js - Key Differences
Просмотров 6 тыс.7 месяцев назад
Starting from version 13.4, Next.js moved to a new way of routing, based off of the app directory. This videos discusses the key things to keep in mind when transitioning. 0:00 Intro 0:48 Pages still supported 1:46 Folder-based Routing 3:23 _app & _document gone 4:28 Data Fetching 5:37 Static Site Generation (SSG) 6:07 SEO 6:57 API Routes 8:02 Revalidation & Caching 9:11 Server Components Websi...
How to Implement Login With GitHub OAuth using PHP
Просмотров 4717 месяцев назад
This video shows how to implement GitHub OAuth that allows users to sign in on an application with their GitHub account. GitHub repo: github.com/iabhinavr/codelab/tree/master/app/public/oauth/github Website: codingreflections.com Server providers: Linode: codingreflections.com/go/linode/ DigitalOcean: codingreflections.com/go/digitalocean/ Disclaimer: This video is based on my personal experien...
How OAuth Authentication Works
Просмотров 2147 месяцев назад
This video gives you a general overview on how OAuth authentication works. Website: codingreflections.com Server providers: Linode: codingreflections.com/go/linode/ DigitalOcean: codingreflections.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% accurate. Disclosure: This video and its descri...
How to Create Alerts & Popups using JavaScript - using SweetAlert with examples
Просмотров 849 месяцев назад
This video shows you how to create alert, confirmation, and prompt dialog boxes - using vanilla JavaScript, and using SweetAlert. Website: codingreflections.com Server providers: Linode: codingreflections.com/go/linode/ DigitalOcean: codingreflections.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences and knowledge. There is no guarantee that the information shared ...
How I Built a Blog CMS using Vanilla PHP, MySQL & JavaScript - User Login, Image Upload & more
Просмотров 92811 месяцев назад
This video shows you how I built a blog website with just vanilla PHP, MySQL, and JavaScript. Going through the demo, followed by showing how to setup the demo on your system by cloning the Github repository. View project on Github: github.com/iabhinavr/phpcms Website: codingreflections.com Server providers: Linode: codingreflections.com/go/linode/ DigitalOcean: codingreflections.com/go/digital...
How to Install Imagick Extension in PHP
Просмотров 3,3 тыс.Год назад
This videos shows how to install and enable the Imagick extension in PHP on an Ubunut server running the Nginx web server. Imagick is the PHP extension for ImageMagick, a software that allows image manipulations, like cropping, resizing, color corrections, etc. Website: codingreflections.com Server providers: Linode: codingreflections.com/go/linode/ DigitalOcean: codingreflections.com/go/digita...
Integrating Yoast SEO with Next.js Headless WordPress [part 20]
Просмотров 1,7 тыс.Год назад
This video is about adding the essential SEO tags to a Next.js site with the help of the Yoast SEO plugin. We'll add custom title, meta description and opengraph tags. Website: codingreflections.com Server providers: Linode: codingreflections.com/go/linode/ DigitalOcean: codingreflections.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences and knowledge. There is no ...
How to add Google fonts in Next.js - Next.js + Headless WP [part 19]
Просмотров 527Год назад
This video shows you how to change the font in a Next.js site using the font module, which comes with the ability to self-host the font files. We'll replace the default fonts with a pair of Google Fonts. Website: codingreflections.com Server providers: Linode: codingreflections.com/go/linode/ DigitalOcean: codingreflections.com/go/digitalocean/ Disclaimer: This video is based on my personal exp...
On-demand Revalidation with Next.js & WordPress - Next.js + Headless WordPress [part 18]
Просмотров 1,1 тыс.Год назад
On-demand revalidation allows us to update an individual post in Next.js without rebuilding the whole site. Plugin used: github.com/iabhinavr/frontend-notifier Project repo: github.com/iabhinavr/CoolNomad-NextJS Website: codingreflections.com Server providers: Linode: codingreflections.com/go/linode/ DigitalOcean: codingreflections.com/go/digitalocean/ Disclaimer: This video is based on my pers...
Adding WordPress Commenting to Next.js using GraphQL Mutations - Next.js + Headless WP [part 17]
Просмотров 1,3 тыс.Год назад
This episode shows how to add comments to the headless WordPress blog using graphql mutations. Website: codingreflections.com Server providers: Linode: codingreflections.com/go/linode/ DigitalOcean: codingreflections.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% accurate. Disclosure: This ...
How to Authenticate Next.js with WPGraphQL using JWTs - Next.js + Headless WordPress [ part 16]
Просмотров 2,8 тыс.Год назад
This video shows you how to authenticate the Next.js frontend with the WPGraphQL API using JSON Web Tokens (JWTs). Learn more: jwt.io/introduction Website: codingreflections.com Server providers: Linode: codingreflections.com/go/linode/ DigitalOcean: codingreflections.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences and knowledge. There is no guarantee that the in...
How to Encode a String to Base64 - Step-by-step process & Use case in Javascript and PHP
Просмотров 125Год назад
This video shows you the step-by-step process of base64 encoding a string. Also shows a use case where it came useful when developing with Javascript and PHP.
How to Deploy a Next.js Application on a VPS Server - Next.js + Headless WordPress [ part 15]
Просмотров 13 тыс.Год назад
In this video, I will show you how to deploy a Next.js application to a VPS server. We will go through the process of committing all the code edits to a git repository, then pushing all those things to a remote repo on Github, setting up a server on a cloud provider, then SSHing and cloning the repository to the server and installing the application. You will learn how to setup and Nginx revers...
Creating the Category Archive Pages - Next.js + Headless WordPress Blog [part 14]
Просмотров 1,1 тыс.Год назад
Creating the Category Archive Pages - Next.js Headless WordPress Blog [part 14]
Implementing Pagination (Load More Button) in a Next.js Blog [part 13]
Просмотров 4,4 тыс.Год назад
Implementing Pagination (Load More Button) in a Next.js Blog [part 13]
Form handling in Next.js - Headless WP + Next.js Blog [part 12]
Просмотров 1 тыс.Год назад
Form handling in Next.js - Headless WP Next.js Blog [part 12]
Creating the About page, and other Static Pages - Next.js + Headless WordPress Blog [part 11]
Просмотров 1,1 тыс.Год назад
Creating the About page, and other Static Pages - Next.js Headless WordPress Blog [part 11]
Adding formatting to the Content Area - Next.js + Headless WP Blog [part 10]
Просмотров 949Год назад
Adding formatting to the Content Area - Next.js Headless WP Blog [part 10]
Creating the Single Post Pages - Next.js + Headless WordPress [part 9]
Просмотров 2,1 тыс.Год назад
Creating the Single Post Pages - Next.js Headless WordPress [part 9]
How to Convert Date Strings in Next.js / React - Next.js + WP [part 8]
Просмотров 2,4 тыс.Год назад
How to Convert Date Strings in Next.js / React - Next.js WP [part 8]
Next.js Tutorial - How to Fetch Posts from WordPress GraphQL API [part 7]
Просмотров 6 тыс.Год назад
Next.js Tutorial - How to Fetch Posts from WordPress GraphQL API [part 7]
How to Setup GraphQL API on WordPress - Headless WP using Next.js [Part 6]
Просмотров 5 тыс.Год назад
How to Setup GraphQL API on WordPress - Headless WP using Next.js [Part 6]
Creating the Home page with Tailwind CSS - Next.js + Headless WordPress Blog [Part 5]
Просмотров 3 тыс.Год назад
Creating the Home page with Tailwind CSS - Next.js Headless WordPress Blog [Part 5]
Routing in Next.js - Static and Dynamic Routes - Next.js + Headless WordPress [Part 4]
Просмотров 3 тыс.Год назад
Routing in Next.js - Static and Dynamic Routes - Next.js Headless WordPress [Part 4]
How to Install Next.js and Directory Structure - Next.js + Headless WordPress [Part 3]
Просмотров 3,7 тыс.Год назад
How to Install Next.js and Directory Structure - Next.js Headless WordPress [Part 3]
Overview of What We're going to Build - Next.js + Headless WordPress - [Part 2]
Просмотров 4,3 тыс.Год назад
Overview of What We're going to Build - Next.js Headless WordPress - [Part 2]
What is Next.js & How it Works [Part 1]
Просмотров 11 тыс.Год назад
What is Next.js & How it Works [Part 1]
Date and Time in PHP | PHP Tutorial for Beginners | Ep 8
Просмотров 168Год назад
Date and Time in PHP | PHP Tutorial for Beginners | Ep 8
Thank you, works perfect!:)
Great video, many thanks
Very good explanation easy and short. All major part covered Thank you!
Thank you! You showed a really nice way of how to apply styling to post content, previously I was trying to parse the HTML returned by WPGraphQL but this way is so much neater!
Hi, first of all thank you for this coding tutorial. I am building my own blog and I am planning to add google ads in it. can I use SSG or I have to use SSR to show ads?
if i pass this test i am coming back with my testimony... nice tutorials. I watched more than two times. Thanks
Thank you, great content
In this WP seems hosted on different server with subdomain, so why there doesn't have any CORS error?
From what I have learnt, CORS is a mechanism implemented on browsers to prevent web pages from making requests to another domain. But in this case, the next.js frontend (browser) is making requests to the next.js server itself (same domain), which in turn make requests to the WP backend (subdomain). So the browser is not directly making any requests to the wp subdomain, hence no errors. CORS is not applicable for server-to-server communication.
How did you manage to solve the CORS policy error when using localhost?
Try downloading your Github repo, it doesn't work. Fetch failed every time. Also, the "catetory" typo is in the repo as well (fixing it doesn't solve the fetching issue)
Have you changed the fetch url to your wordpress installation url under lib/graphqlRequest.js? Otherwise fetch will fail because it is pointing to my wp url. If not, you can find the wp backup files in the repo, which you can use to install a copy of the wordpress site on your localhost or remote server. As you said, the typo - "getCatetory" - has nothing to do with the fetching issue since it is only the query name, which can be anything. Anyway, I have fixed it, thanks for pointing that out.
@@CodingReflections I tried running it with your URL and then changed it to mine, still fails. The error is always fetch related. The default Nextjs ISR WP blog template works and fetches properly, but doesn't have category archives that I'm trying to add EDIT: Works now! This is the error I was getting: Server Error Error: A required parameter (slug) was not provided as a string received undefined in getStaticPaths for /category/[slug] This error happened while generating the page. Any console logs will be displayed in the terminal window. This is what Github Copilot came up with and it fixed it: "In your getStaticPaths function, you're mapping over categories and for each category, you're returning an object with params that contains categoryName: category.slug. However, the error message suggests that the function is expecting a slug parameter, not a categoryName In this updated code, I've changed categoryName: category.slug to slug: category.slug to match the expected slug parameter." return { paths: categories.map((category) => ( { params: { slug: category.slug } } )), fallback: false, }
can u use lambda function for this. for next video
Need to add headless plugin just add this code in functions.php add_action('template_redirect', 'redirect_to_login_if_not_logged_in'); function redirect_to_login_if_not_logged_in() { if (!is_user_logged_in() && !is_admin()) { auth_redirect(); } }
is there a way to use useFormState with the pages router version of next.js? Or an appropriate modification that would allow file uploads using the pages router?
can we use custom post type in headless cms
Hey. Thanks for the video! Question... can you fetch non HTML value for content or excerpt with authentication? Also.. can you add the wp-config.php constants by SSH-ing to the WP staging instance or does it have to be a custom hosted WP instance? Thanks!
Thanks for this content. But could you please do a crash course beginners friendly on Next.JS 14 for frontend and WordPress for backend thank you.
Great work man 🚀
Where you able to complete yours??
Great playlist! Thank you so much 🙏
This might have been a great example but it seems to need some updates and has not been tested (produces several errors on testing).
great explanation. Thank you
👏🏻👏🏻👏🏻👏🏻👏🏻
ALL YOUR VIDEO IS ABSOLUTELY BEST... THANK YOU SIR
Thanks so much for this great series. But I'm stuck in this episode. I get a server error (500) after clicking the Load More Posts button. I don't know why. Other fetch requests are handled well. But this one has stopped me for 2 days. I've tried everything and it never gets resolved. How can I reach you??
Hello nicely designed can we have a link to the repository of this article
thanks a lot for the lovely content, your explanation is wonderful, i have watched your WP series and it is remarkable and so helpful, but i am wondering if you will do a tutorial about multilang with headless WP and next 14 using polylang and graphQL? if you did it will be an excellent addition to that wonderful playlist!
isn't the roundtrip that you're doing, client -> server -> s3, instead of client -> s3 directly kind of an overhead?
I mean in your case it does make sense because you don't want to expose any of the keys but it would require less network if you were to create a presigned url from the server, send it to the client and let the client upload the file directly. what do you think?
I did it this way to keep the aws credentials safe on the server. Instead if it was on the client, won't it get exposed to the client, even if it is a predesigned url?
@@CodingReflections nah, thats the whole concept of presigned url. i think you should refer it, the current method which you are describing is just wasting double bandwidth.
@@impc-lx9gf what's the practical difference? you need to hit the server either way to either get the credentials or a pre-signed url.
@@milkboxshow1416 there is big difference between uploading file to server then s3 and just hiting server for s3, any way you must be not in production so that's why you will not get it either way. Thanks 😊
Very well explained. Congrats for a great video
Great video. Thank you ❤
Do you continous this playsit ( to ad ACF or WooCommerce ) ?
that would be amazing nextjs + woo commerce
do you going to continuous the tutorial about this stack ( for ACF pro implementation ) ?
if we follow this tuto we can implement it easily on the wphadless + nextJS tutorial than you maked ?
Thanks you so much it work ! But how i can get the email ? is null..
content starts from 8:30 thank me later
What about seo fullhead?
Hello I search a Team of NextJS + Wordpress developer to make a Online School In France. With "script" accessible by paywall to learn HTM CSS JS and share some solutions. If you are interessed by this kind of business let me know.
really good video. do you have more video on aws console?
Well explained. Thanks
why I’m facing error: The requested URL was not found on this server. Apache/2.4.57 (Ubuntu) Server at 165.232.189.218 Port 80
Hello, Coding Reflections Nice video also overal playlist , I have a question about single page post every single post page different Scheemas I want to fetch also scheema. So How to do that can you suggest proper solution
Awesome! XP! thank u!
awesome! THANK YOU!
Hello I'm learning the all playlist thanks for this videos, is it possible to do it without graphql using REST is it good idea or not and one more thing custome field explained in yhis all play list because im using custom field created by my self not with plugin
Out of all of the videos I've watched on these changes, yours made the most sense to me. Clear, straight to the point and descriptive with examples. Thank you!
Bro are you a mallu?
7:15 "Make sure to name the API route files as `route.js`. That's how they differ from other `page.js` routes" ... Next.js API design in a nutshell. Why didn't they call API routes 'api_route.js' or 'http_requests.js' so you can actually differ API routes from other routes? Now people will wonder if 'route.js' will override the filesystem routing or whatnot..
thanks for the detailed video 😘
how fetch embed video from graphiQL wordpress plugin? Not possble?
Thank you so much. Exactly what I needed with wonderful guidance
すごいわかりやすい...