Next BLOGFOLIO: Importing SVGs 🖼️ & Typing Animation ⌨️ 🔴 Next.js & Chill
Let’s figure out how to do cool tech 🥳
We’re continuing our “Next.js & Chill” streams, where I focus on React/Next.js!
Our first project is updating my own site / portfolio / blog! Which is already a Next.js blog, so it shouldn’t be that big a leap… But we will be striving for the latest best practices, like the new app router, React Server Components and HTML streaming!
🚀 Check out the app yourself! [https://magrippis.com/](https://magrippis.com/)
💻 See the code, open-source and free: [https://github.com/jmagrippis/magripp...](https://github.com/jmagrippis/magripp...)
— COMMUNITY —
New DISCORD SERVER for us 😱: [ / discord ]( / discord )
— 🥳🥳🥳 —
— PREVIOUSLY… —
✅ A new Next.js app with `npx create-next-app@latest``--experimental-app --typescript --tailwind` https://beta.nextjs.org/docs/installa...
✅ Turbopack, `app` directory, and other conventions I like: https://beta.nextjs.org/docs/routing/...
✅ Tailwind config with CSS Variables
✅ Font Optimisation: https://beta.nextjs.org/docs/optimizi...
✅ Awesome fonts by: https://etceteratype.co/ (and Google Fonts)
✅ Optimised images with https://beta.nextjs.org/docs/optimizi...
✅ File-based METADATA: https://beta.nextjs.org/docs/api-refe...
✅ Dark Mode… with cookies! https://beta.nextjs.org/docs/api-refe...
—— AGENDA ——
✅ Next.js? Blogfolio? What are we doing today?
✅ Huge Vercel news with Vercel Storage?! https://vercel.com/blog/vercel-storage
✅ Importing SVGs short video: • Why can’t I get my LOGO in my APP? 😨 ...
✅ SVG Icons with @svgr/webpack
✅ Typescript support?!
✅ Does it work with Turbopack?! https://turbo.build/pack/docs/feature...
✅ Typing animation: • Code your own TYPING ANIMATION with R...
——⬇️ BONUS ⬇️——
[ ] Analytics with Plausible
[ ] Workable design between OG https://magrippis.com/ & new trends!
[ ] MDX: Markdown-powered blogposts: https://beta.nextjs.org/docs/guides/mdx
[ ] Usage with MDX remote: https://github.com/hashicorp/next-mdx...
[ ] Infinite Magnetic Carousel
[ ] Sticky Header
[ ] Playwright setup
[ ] Mock Service Worker / MSW
[ ] Stripe Subscriptions
[ ] DB with Supabase
[ ] NEXT STEPS: Some of the “BONUS”s we didn’t get to? Let me know!
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉: / discord
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
— TIMESTAMPS —
0:00 - Intro, Agenda & Next.js Storage!
9:00 - Importing SVGs as React Components
1:18:30 - NO MORE LOUD MUSIC
1:19:30 - Typing Animation
Watch video Next BLOGFOLIO: Importing SVGs 🖼️ & Typing Animation ⌨️ 🔴 Next.js & Chill online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 271 once and liked it 8 people.