Coding Reflections
Coding Reflections
  • Видео 65
  • Просмотров 336 289
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...
Просмотров: 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

Комментарии

  • @danieladam4719
    @danieladam4719 22 часа назад

    Thank you, works perfect!:)

  • @codecobber1107
    @codecobber1107 7 дней назад

    Great video, many thanks

  • @developerap6033
    @developerap6033 15 дней назад

    Very good explanation easy and short. All major part covered Thank you!

  • @borsos_ilo
    @borsos_ilo 16 дней назад

    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!

  • @websitesbysagar
    @websitesbysagar 21 день назад

    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?

  • @goodnewsjohn2482
    @goodnewsjohn2482 28 дней назад

    if i pass this test i am coming back with my testimony... nice tutorials. I watched more than two times. Thanks

  • @mahmoudibrahim9803
    @mahmoudibrahim9803 29 дней назад

    Thank you, great content

  • @OwlthTech
    @OwlthTech 29 дней назад

    In this WP seems hosted on different server with subdomain, so why there doesn't have any CORS error?

    • @CodingReflections
      @CodingReflections 29 дней назад

      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.

  • @user-jn5sr3ed4s
    @user-jn5sr3ed4s Месяц назад

    How did you manage to solve the CORS policy error when using localhost?

  • @xen.7140
    @xen.7140 Месяц назад

    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)

    • @CodingReflections
      @CodingReflections Месяц назад

      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.

    • @xen.7140
      @xen.7140 Месяц назад

      @@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, }

  • @regilearn2138
    @regilearn2138 Месяц назад

    can u use lambda function for this. for next video

  • @user-kl6fw2jo7i
    @user-kl6fw2jo7i Месяц назад

    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(); } }

  • @milkboxshow1416
    @milkboxshow1416 Месяц назад

    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?

  • @preetbajwa2629
    @preetbajwa2629 Месяц назад

    can we use custom post type in headless cms

  • @mrchedda
    @mrchedda Месяц назад

    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!

  • @adeolaabdulramon9251
    @adeolaabdulramon9251 Месяц назад

    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.

  • @ivaylopetrov9956
    @ivaylopetrov9956 Месяц назад

    Great work man 🚀

  • @ivaylopetrov9956
    @ivaylopetrov9956 2 месяца назад

    Great playlist! Thank you so much 🙏

  • @tree2828
    @tree2828 2 месяца назад

    This might have been a great example but it seems to need some updates and has not been tested (produces several errors on testing).

  • @ssojyeti2
    @ssojyeti2 2 месяца назад

    great explanation. Thank you

  • @leonardolopes9360
    @leonardolopes9360 2 месяца назад

    👏🏻👏🏻👏🏻👏🏻👏🏻

  • @BeyeDev
    @BeyeDev 2 месяца назад

    ALL YOUR VIDEO IS ABSOLUTELY BEST... THANK YOU SIR

  • @johnnwabuforudemezue1108
    @johnnwabuforudemezue1108 2 месяца назад

    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??

  • @johnnwabuforudemezue1108
    @johnnwabuforudemezue1108 2 месяца назад

    Hello nicely designed can we have a link to the repository of this article

  • @Zoone-hn2zq
    @Zoone-hn2zq 2 месяца назад

    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!

  • @Slaat1
    @Slaat1 3 месяца назад

    isn't the roundtrip that you're doing, client -> server -> s3, instead of client -> s3 directly kind of an overhead?

    • @Slaat1
      @Slaat1 3 месяца назад

      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?

    • @CodingReflections
      @CodingReflections 3 месяца назад

      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?

    • @impc-lx9gf
      @impc-lx9gf 2 месяца назад

      @@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.

    • @milkboxshow1416
      @milkboxshow1416 Месяц назад

      @@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.

    • @impc-lx9gf
      @impc-lx9gf Месяц назад

      @@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 😊

  • @AlanDanielx
    @AlanDanielx 3 месяца назад

    Very well explained. Congrats for a great video

  • @CKNMEDIA
    @CKNMEDIA 3 месяца назад

    Great video. Thank you ❤

  • @wilonweb
    @wilonweb 3 месяца назад

    Do you continous this playsit ( to ad ACF or WooCommerce ) ?

    • @nofeah89
      @nofeah89 2 месяца назад

      that would be amazing nextjs + woo commerce

  • @wilonweb
    @wilonweb 3 месяца назад

    do you going to continuous the tutorial about this stack ( for ACF pro implementation ) ?

  • @wilonweb
    @wilonweb 3 месяца назад

    if we follow this tuto we can implement it easily on the wphadless + nextJS tutorial than you maked ?

  • @Maxime66410
    @Maxime66410 3 месяца назад

    Thanks you so much it work ! But how i can get the email ? is null..

  • @mastervikram2030
    @mastervikram2030 3 месяца назад

    content starts from 8:30 thank me later

  • @Foused87
    @Foused87 3 месяца назад

    What about seo fullhead?

  • @wilonweb
    @wilonweb 4 месяца назад

    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.

  • @magnuserikkeenrobot1117
    @magnuserikkeenrobot1117 4 месяца назад

    really good video. do you have more video on aws console?

  • @MoBedwi
    @MoBedwi 4 месяца назад

    Well explained. Thanks

  • @ankit_aniket
    @ankit_aniket 4 месяца назад

    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

  • @hasnainqari
    @hasnainqari 4 месяца назад

    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

  • @taiyc3
    @taiyc3 4 месяца назад

    Awesome! XP! thank u!

  • @taiyc3
    @taiyc3 4 месяца назад

    awesome! THANK YOU!

  • @inayatalicom
    @inayatalicom 4 месяца назад

    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

  • @DannyCare91
    @DannyCare91 4 месяца назад

    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!

  • @imkir4n
    @imkir4n 4 месяца назад

    Bro are you a mallu?

  • @magne6049
    @magne6049 4 месяца назад

    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..

  • @riveto_ir
    @riveto_ir 4 месяца назад

    thanks for the detailed video 😘

  • @Grolliiitjk
    @Grolliiitjk 4 месяца назад

    how fetch embed video from graphiQL wordpress plugin? Not possble?

  • @jacobrebec4951
    @jacobrebec4951 4 месяца назад

    Thank you so much. Exactly what I needed with wonderful guidance

  • @zu_n_i
    @zu_n_i 5 месяцев назад

    すごいわかりやすい...