Uploaded October 2024 | Updated September 2026, 2 weeks ago
Let's learn how to upload files using server actions with Zod validation to Strapi 5.
✨ Code: github.com/PaulBratslavsky/next-strapi-5-file-upload-example
In this video, we will look at how to handle file uploads in Next.js using server actions and a Strapi backend.
The process involves making requests to an endpoint to upload files. Strapi 5 is a headless CMS that facilitates quick endpoint creation.
This video will cover simple and multi-part uploads, including error handling for file size and required fields using Zod.
Our project is built with Typescript, React, Next.js, and Shadcn UI to style our project.
Topics include:
- Setting up a front-end form in Next.js for image uploads, utilizing Shadcn UI for styling.
- Implementing server-side validation using Zod to check for valid image files and required descriptions.
- The flow of data from the front-end form to the Strapi backend, including creating posts with uploaded images.
- The flexibility of a headless CMS allows users to manage uploads directly from a front-end application instead of the admin interface.
- There are many great benefits of using a headless CMS and Next.js together to build full-stack applications.
Key Points:
- Understanding File Uploads: I’ll explain the general concept of file uploading, where we make a request to an endpoint to send our files.
- Using Strapi: I’ll showcase how Strapi allows you to create endpoints swiftly and manage file uploads efficiently.
- Front-End Integration: Discover how we utilize Next.js along with the elegant Shetan UI library to create a user-friendly interface for file uploads.
- Error Handling: Learn about basic error handling mechanisms to ensure that your file uploads are smooth and user-friendly.
- Multi-Part Uploads: I’ll demonstrate how to handle multi-part uploads, allowing users to submit additional data like descriptions alongside their images.
- Server-Side Validation: Understand the importance of validating file inputs on the server side to ensure data integrity.
- Building a Custom Admin Area: I’ll touch on the flexibility of exposing specific endpoints to your users, empowering them to manage content directly from your Next.js frontend.
Don’t forget to like, share, and subscribe for more tutorials on Next.js and Strapi! Happy coding!
Let's learn how to upload files using server actions with Zod validation to Strapi 5.
✨ Code: github.com/PaulBratslavsky/next-strapi-5-file-upload-example
In this video, we will look at how to handle file uploads in Next.js using server actions and a Strapi backend.
The process involves making requests to an endpoint to upload files. Strapi 5 is a headless CMS that facilitates quick endpoint creation.
This video will cover simple and multi-part uploads, including error handling for file size and required fields using Zod.
Our project is built with Typescript, React, Next.js, and Shadcn UI to style our project.
Topics include:
- Setting up a front-end form in Next.js for image uploads, utilizing Shadcn UI for styling.
- Implementing server-side validation using Zod to check for valid image files and required descriptions.
- The flow of data from the front-end form to the Strapi backend, including creating posts with uploaded images.
- The flexibility of a headless CMS allows users to manage uploads directly from a front-end application instead of the admin interface.
- There are many great benefits of using a headless CMS and Next.js together to build full-stack applications.
Key Points:
- Understanding File Uploads: I’ll explain the general concept of file uploading, where we make a request to an endpoint to send our files.
- Using Strapi: I’ll showcase how Strapi allows you to create endpoints swiftly and manage file uploads efficiently.
- Front-End Integration: Discover how we utilize Next.js along with the elegant Shetan UI library to create a user-friendly interface for file uploads.
- Error Handling: Learn about basic error handling mechanisms to ensure that your file uploads are smooth and user-friendly.
- Multi-Part Uploads: I’ll demonstrate how to handle multi-part uploads, allowing users to submit additional data like descriptions alongside their images.
- Server-Side Validation: Understand the importance of validating file inputs on the server side to ensure data integrity.
- Building a Custom Admin Area: I’ll touch on the flexibility of exposing specific endpoints to your users, empowering them to manage content directly from your Next.js frontend.
Don’t forget to like, share, and subscribe for more tutorials on Next.js and Strapi! Happy coding!
![How To Set Up Next Auth 5 in Next.js 15 [ project code included ]](https://i.ytimg.com/vi/xHQQ5I7E_H8/mqdefault.jpg "How To Set Up Next Auth 5 in Next.js 15 [ project code included ]
Getting started with NextAuthJS 5 the easy way with Next.js 15
✨ Checkout Template From Magic UI: https://pro.magicui.design/?ref=cat
👉 project repo: https://github.com/PaulBratslavsky/next-15-strapi-5-starter/tree/main/client
😅 my site: https://www.codingafterthirty.com
In this tutorial, I will walk you through how I set up the NextAuthJS package to add authentication to my Next 15 JS application.
Authentication Setup and Configuration
🔐 NextAuth 5 streamlines authentication setup in Next.js 15 projects, with improved documentation and simplified configuration steps.
🛠️ Create an auth.ts file to add desired providers in the providers array, which automatically detects environmental tokens from local and vite config files.
Route Protection and Handling
🛡️ Utilize Next.js middleware to specify protected routes and implement authentication checks, redirecting unauthenticated users to the main page.
🔀 NextAuth 5 offers pre-built route handlers for authentication logic, easily importable and usable in your routes.
Session Management and User Experience
👤 The session provider in NextAuth 5 enables access to session status in React components, allowing for conditional rendering of authenticated content.
🔌 NextAuth 5 provides pre-built handlers for popular authentication providers like GitHub, simplifying integration in Next.js 15 projects.
Hope you enjoyed the tutorial. Thank you for watching.")
![Getting Started with TanStack Start [ how to fetch data in Tanstack Start ]](https://i.ytimg.com/vi/xn_GNyZP2Mk/mqdefault.jpg "Getting Started with TanStack Start [ how to fetch data in Tanstack Start ]
How to fetch data in TanStack Start using server functions.
👉 Full Project Repo: https://github.com/PaulBratslavsky/strapi-tanstack-start-starter
In this video, we will take a look how to get started with Tanstack Start, if you are a complete beginner or just want to give TanStack a try, this video is for you.")
