- Видео 28
- Просмотров 26 996
J-HAYER
Добавлен 26 сен 2008
Hi, I'm Johannes! I'm an AWS Certified Solutions Architect from Germany. I love building software and to try out new technologies. I write and make videos about my learnings and experiments.
Visit my blog for more Infos about me and my work
jhayer.tech
Visit my blog for more Infos about me and my work
jhayer.tech
NEXTJS 15 | What will change? 🐚
🚀 Next.js 15 Key Changes in 8 Minutes!
Key updates:
New @next/codemod CLI for easy version upgrades
React 19 support & improved hydration errors
Turbopack Dev mode now stable (up to 96% faster!)
Static Route Indicator for development
Async Request APIs for headers, cookies & params
New caching defaults (no more auto-caching)
Improved self-hosting capabilities
Better Server Actions security
📚 Full code examples in my GitHub
github.com/XamHans/nextjs-15-...
🎥 Want to learn more about self-hosting Next.js? Check out Lee Robinson's detailed guide:
ruclips.net/video/sIVL4JMqRfc/видео.html
#NextJS #WebDev #JavaScript #React
Key updates:
New @next/codemod CLI for easy version upgrades
React 19 support & improved hydration errors
Turbopack Dev mode now stable (up to 96% faster!)
Static Route Indicator for development
Async Request APIs for headers, cookies & params
New caching defaults (no more auto-caching)
Improved self-hosting capabilities
Better Server Actions security
📚 Full code examples in my GitHub
github.com/XamHans/nextjs-15-...
🎥 Want to learn more about self-hosting Next.js? Check out Lee Robinson's detailed guide:
ruclips.net/video/sIVL4JMqRfc/видео.html
#NextJS #WebDev #JavaScript #React
Просмотров: 382
Видео
How to Analyze Customer Reviews Using Azure AI Search!
Просмотров 75Месяц назад
In this tutorial, we’ll build a customer sentiment solution for an imaginary company, Fourth Coffee, using Azure AI Search. We start by diving into the core concepts of Azure AI Search, including how the Search Index works and how the Index Pipeline processes data. Once we understand the fundamentals, we’ll move to the Azure Portal, where we’ll guide you through creating an Azure AI Search reso...
Nextjs.14: Protect your server code with this unknown package !
Просмотров 162 месяца назад
www.npmjs.com/package/server-only The challenge with Next.js is that JavaScript modules can be shared between server and client components, sometimes unintentionally. This can lead to sensitive data being exposed in the client bundle, increase bundle size, and create security vulnerabilities. Tune in to learn how to manage this effectively! Maintaining a clear boundary between server-only and c...
This AI Database tool is INSANE! #ai #postgres
Просмотров 1432 месяца назад
postgres.new is a new database tool from supabase. I spins up a local database in your browser with the help of WASM. You can upload files and it will generate you the SQL statements. You can paste in json structures and it will generate you the right tables for it. With the visualisations on the left side its easy to control if the AI result was legit. Whenenver you need to deal with postgres,...
AI Agent Web Scraper are HERE
Просмотров 7473 месяца назад
In this video, I'll introduce you to a smarter way of web scraping using AI Agents. Instead of manually defining every XPath or workflow, we can let AI Agents handle it. All you need to do is specify where you want the data from and how it should look. We'll be using CREW AI to create and run the agent in this example. Links: 📚 Free CREW AI Course: www.deeplearning.ai/short-courses/multi-ai-age...
Don't tell your colleagues about AIDER | How to install & use it to develop faster
Просмотров 2403 месяца назад
Aider AI: The Terminal-Based AI Helper for Faster Coding 🌐 github.com/paul-gauthier/aider 💻 aider.chat/ Want to code faster? This video shows you how to use Aider AI, a helpful AI programming assistant that works in your terminal. We'll use it to build a complete CRUD application with Next.js 14, shadcn, Zod, react-hook-form, and Appwrite. In this video, you'll see: How to set up Aider AI with ...
Better than Clerk? How to use LogTo in your Nextjs 14 app
Просмотров 3483 месяца назад
How to Integrate Logto Authentication in a Next.js 14 App In this video, I’ll guide you through integrating Logto, an open-source identity and access management (IAM) solution, into your Next.js 14 application. Logto simplifies authentication and authorization, making it an excellent choice for modern SaaS applications. Whether you're building a new app or enhancing an existing one, Logto provi...
Types of Machine Learning - Azure AI-900
Просмотров 223 месяца назад
Do you know the difference between Supvervised and Unsupervised Machine Learning? If not, then this is for you. I recently passed my Azure AI certification, and I'm excited to share what I've learned! I'm turning my study experience into a FREE, easy-to-understand Azure AI-900 course. Interested? Follow the link to sign up and get notified when the course launches. 👉 subscribepage.io/ai-900 👈 #...
What is Machine Learning? Azure AI-900
Просмотров 163 месяца назад
I used to think ML was only for math geniuses. Boy, was I wrong! Here's the truth: understanding ML basics is crucial in today's AI-driven world, regardless of your background. I recently passed my Azure AI certification, and I'm excited to share what I've learned! I'm turning my study experience into a FREE, easy-to-understand Azure AI-900 course. Interested? Follow the link to sign up and get...
Thats the way! How to: Supabase SSR Auth in Nextjs 14
Просмотров 1,1 тыс.5 месяцев назад
🌐 Server-Side Authentication with Supabase & Next.js 14: A Step-by-Step Guide Description: 🚀 Welcome to this tutorial on upgrading from client-side to server-side authentication in your Supabase project with Next.js 14 using the @supabase/ssr package! 🔍 In this video, you'll learn: Setting Up: Install necessary Supabase packages. Configuring Environment: Set up your .env.local file. Creating Su...
Next.js 14 - Server Actions | This library is crazy!
Просмотров 5415 месяцев назад
If you write a lot of server actions you probably are struggling with code duplication. This library helps you with a good abstraction and other benefits to bring your server actions to the next level ! next-safe-action handles your Next.js app mutations type safety, input validation, server errors and even more! Resources ⛏️ github.com/XamHans/next-safe-action-example-supabase github.com/TheEd...
How to use drizzle in aws serverless env
Просмотров 4956 месяцев назад
Struggling to integrate Drizzle with AWS Lambda? You're not alone. This in-depth tutorial cuts through the confusion and takes you step-by-step. Our ingredients for this serverless success: Drizzle AWS CDK PostgreSQL RDS AWS Secrets Manager TypeScript Lambda 🌎Github repo: github.com/XamHans/aws-serverless-drizzle-cdk-poc #aws #cdk #typescript #drizzle #serverless
How to create your personal AI Learning Assistant in 5 Minutes!
Просмотров 2436 месяцев назад
🚀 Create your personal learning assistant in just 5 minutes! In this tutorial, I'll show you how to use Zapier Central to build a bot that delivers daily quizzes via Telegram, tailored to the content you want to learn. This smart assistant helps you reinforce knowledge effortlessly. 🤝 Are you a bot developer? Let companies reach out to you: botdevs.io/ 💬 Get started with Zapier Central: zapier....
How To: Next.js 14 & Supabase - Authentication
Просмотров 2,2 тыс.8 месяцев назад
How To: Next.js 14 & Supabase - Authentication
Boost Your AWS Development with this VS Code Extension!
Просмотров 189 месяцев назад
Boost Your AWS Development with this VS Code Extension!
How to setup SupaBase locally | 2024
Просмотров 7 тыс.9 месяцев назад
How to setup SupaBase locally | 2024
How to get text from any YT video | Free transcribe program 🖹
Просмотров 2,8 тыс.Год назад
How to get text from any YT video | Free transcribe program 🖹
How to install GPT4All for Python - Locally - Linux
Просмотров 1,2 тыс.Год назад
How to install GPT4All for Python - Locally - Linux
How TO: Build your own Telegram Chatbot + ChatGPT
Просмотров 85Год назад
How TO: Build your own Telegram Chatbot ChatGPT
HOW to connect to a Wallet - Next.js/React + BONUS with Alchemy
Просмотров 8232 года назад
HOW to connect to a Wallet - Next.js/React BONUS with Alchemy
How to build a Fullstack DApp on Ethereum with Solidity & React - 2022
Просмотров 2,4 тыс.2 года назад
How to build a Fullstack DApp on Ethereum with Solidity & React - 2022
How to Setup Hardhat with Typescript
Просмотров 1,9 тыс.2 года назад
How to Setup Hardhat with Typescript
It's 'brew install supabase/tap/supabase' now
Thanks for pointing that very interesting tool
Ugh, Supabase won't fully start up. It goes through most of the containers but then stops when it tries to fully setup the supabase-vector, then it stops the containers. On Windows.
Do you have enough ram ? Does any error shows up in the terminal ?
Good content subbed. You voice is very quiet in places
@@tomwawer5714 thanks for feedback working on it :)
Thanks bro ❤
What after power of the computer? Will I have to again download the full model?
@@riolife1931 hi you only need to download it once and then can use it even after computer re start
Should we use SSR just for auth related stuff? Because their copy-paste clients have cookies so it disables cache
As far as I know the SSR package is only Auth related and it's package that provides you Auth functionality for client and server side
I appreciate you talking about inbucket man, it was exactly what I was looking for!
Thanks for the content and Crews site is very nice.
Thanks for your comment :)
Can you please update your github repo link for this project
how to change postgress password, jwt etc..?
Username: supabase Password: this_password_is_insecure_and_should_be_updated
Top. Please make vidéo on supabase and JS vanilla
Thank you 🎉
Hi there!! Thank you for the video it was really nice.. I’ve setup supabase/srr on my Remix js app. The createBroswerClient and createServerClient works!! But I still don’t understand the concept between when to use the Broswer Client or the Server Client.. I know that when it’s for front-end is the Broswer Client but I think I would need a real life example to understand both. Anyone can help me?
Hi for example when you have a stock or e-commerce application where you need real time data you use the browser client to fetch periodically. On the other hand when you have an application that shows blog posts that are not changing that often you use the server client to fetch them and make use of the SEO benefits
Thanks!!
Thanx for this 👏
Great! can you Make a Video with Setting up the Auth Providers within the local environment?
Hi thanks 🙏 yeah I will put it on my agenda :)
very useful for e2e tests
that's cool bro did you ever use flutterflow, please make tutorial for locally supabase with flutterflow
Thanks I will have a look into flutterflow
upload flutterflow desktop and create this self-hosting supabase, set anon and url
thanks for your video it's a really helpfull trick i didn't know of before. and i want to ask a question , these settings works even if i havn't install eslint nor vscode eslint extestion, and there is no eslintrc file in my project, so where does it get the configuration from can i customize it in some way? and will it conflict with eslint if i install it?
organize imports on save is pretty bad in my experience, it should be done as pre-commit. While developing I often comment out code temporarily and I don't want the imports to go away otherwise "comment code, save, uncomment code" can lead to errors
if you're using vscode you can (ctrl-k then press s) to save without format, it wil save without touching anything just as before, and it's working with the settings in this video.
NGL, not judging the quality of video, but the thumbnail was awesome. Probably AI generated but it's just goes on to show how far has AI come
You are right I was also astonished how clear the text is now
@@J-HAYERwhich AI tool/website did you use for this beautiful thumbnail?
@@flexdash ChatGPT 4 and i think it uses DALL-E. My prompt was something like: create a youtube thumbnail that shows a vs code secret trick :D
Great, thanks for it
first, appreciate this! but1 concern. is it safe?
It runs completely locally so yes what concerns do you have ? Glad that you like it thanks !
ah no, i was like i get that it runs locally. but along with downloading this project in my machine,just incase something unwanted/extra would get along too and make my system worse like virus/trojan kinda thing. just a lil concerned from downloading from 3rd party and obv, free from git. and no worries, the video is sorta underrated.@@J-HAYER
You're great 🥲🤍
Thank you brother
@@J-HAYER Sir.! It has some issues. I suffered with filenotfound error even though I installed ffmeg. Please post another video to rectify error 🥲
Hey i tried this but not working my side. Its shows connection timeout. Please Help me
how to upload manual video
I am working on this
Take this like bro :) Anything running locally is underrated. So many youtubers pushing those god damn "free" (paid) AI tools, it's ridiculous. Good luck with your channel and thank you for taking the time to make this tutorial. Take care
hey man do you think you could update the github link? I think it's down, can't clone it
I do everything step by step and still have 'command not found'. Even after typing the line: export PATH="$HOME/.local/bin:$PATH"
Nice, the problem with this approach though is that you're forced to "use client" on layout losing all the benefits of server components Instead you can put this in a component and import it in layout or wherever you want, also you don't need to put Script inside the head
True words ! Thanks, but what is the benefit of placing the script into the body ?
I think it's only for performance@@J-HAYER It's a Next message called "no-script-tags-in-head-component"
Thank you for the app and the video but I just have to address the elephant in the room that is the fact that subtitles are unavailable for this video. Seriously tho, thanks.
Hello Johannes! Thanks for providing this amazing app, this is very useful! Is there a way I can get the transcription in a subtitle (.srt) form?
I have no clue but maybe one of these repos can help you github.com/m-bain/whisperX , github.com/linto-ai/whisper-timestamped
Perfect 👍 this is what I was looking for
Friend I didn't understand anything from the tutorial, can you explain how to do it for windows 11?
Hi have you python and git installed on windows ? check out this tutorial to install python : www.pythonguis.com/installation/install-python-windows/
Please zoom in on the code; change the color scheme (which was changed later in the video); give reference to all the dependencies. I am new to hardhat, tried watching it, couldn't understand, so leaving.
Thanks for this input, you are absolutely right I will do this in my next videos sorry for that
Thank you so much
Thanks for you feedback Ananya :)
Thanks for the vid Johannes. How would you protect the Alchemy API key if it was a production app?
Put the API key in the .env file and access it with process.env.ALCHEMY_API
@@J-HAYER Thanks! I tried that but it doesn't really work since I'm trying to access that API key on the client side & environmental variables do not work there. Or am I missing something?
@@simasgradeckas4259 If you want to access it from the frontend you need to declare it as NEXT_PUBLIC_ALCHEMY_KEY=xxxxxxx. and then access it process.env.NEXT_PUBLIC_ALCHEMY_KEY
@@simasgradeckas4259 I have run into the same issue, most examples on youtube using next.js dont show this. I am new to next.js but I got it working with URL buying the API folder or client side, Moralis has a next.js hook, but having trouble with it. I agree you dont want your API key showing up, wondering if Next13 any easier?
@@bdk1371 I managed to make it safer by adding my app's domain in Alchemy's domain allowlist. Alchemy will only allow the domains in that list to use that API key. Also I did use Next js 12 because it was more difficult to set up a web3 app with Next js 13.
Ich vermisse deinen Link für die Webseite ;) ...die Welt ist faul, weißt du doch sicher, oder? :D
😅🤙 wagmi.sh/ www.alchemy.com/
thank u , great tutorial ! but i have a problem in the method (register) u can help me ?
Yeah for sure, How can I contact you ?
@@J-HAYER thank uuu ! u can pass ur facebook or ur whatsapp contact ?
ruclips.net/video/wqFnif_6Mbc/видео.html
ruclips.net/video/fNMfMxGxeag/видео.html
Great!
Thank you Lawrence, would you also enjoy a video about the graph ? :)
@@J-HAYER Yes sirree!
Dear Sir,I am working on a project to create a P2P energy management system using blockchain based on VCG auction.I have written the solidty code but I am unable to connect it to thw frontend and show the complete funcrionality on the UI.I would be really thankful if you could help me out of this.
What are you using for interacting with the blockchain, ether.js ? Have you linked correctly to the ABI ? Stackoverflow would be better place to ask for this, you can then post the link I will try my best to help ☀️😊
Please do a similar video with Foundry! We need clear and concise videos like this. There´s too many tools, too many conflicting npm packages in the web3 tooling.
Hello Carlos thank you for your kind words ! Can you provide a link for Foundry? Because I have never heard of it , is it something like hardhat ?
Thank you! Good Job! Keep going!
Sir if we start storing data in ethereum , like candidates name , voter id , etc it will cost a lot. As ethereum is costly.
You are absolutely right ! It was only for learning purposes I also pointed out that this approach is not the way to go and if you want to handling data storing/querying you should be better using something like the graph
@@J-HAYERThanku for reply , sir pl give some idea on how to store data without compromising decentralised principle.
@@pankajjoshi8292 thegraph.com/en/
@@J-HAYER thanku
Sir your video is useful I have referred to my frns , hope we can learn more projects from.you
I thought it'd be a lot more complicated, but you make it seem super easy.
Thanks! :)
Keep it up :D
Also maybe choosing a different ligthsetting for the IDE might be a good idea
Haha yeah, already done :)