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
Смотрите видео Next BLOGFOLIO: Importing SVGs 🖼️ & Typing Animation ⌨️ 🔴 Next.js & Chill онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 271 раз и оно понравилось 8 людям.