Next.js 13.3 BLOGFOLIO: new project with app router, font optimisation and more! 🔴 Next.js Tuesdays

Let’s figure out how to do cool tech 🥳

Anything goes for our Friday livestreams, and it’s usually Svelte-related, but today we’re starting “Next.js Tuesdays”, where I focus on React/Next.js!

Our first project will be upgrading 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, instead of copy & pasting everything from the existing solution 😄

🚀 Check out the app yourself! https://magrippis.com/
💻 See the code, open-source and free: https://github.com/jmagrippis/magrippis

— COMMUNITY —
New DISCORD SERVER for us 😱: https://discord.gg/eR5Q52Sfm3
— 🥳🥳🥳 —

— Agenda —

[ ] Next.js? Blogfolio? What are we doing today?
[ ] A new Next.js app with `npx create-next-app@latest –experimental-app –typescript –tailwind` https://beta.nextjs.org/docs/installation
[ ] Turbopack, `app` directory, and other conventions I like: https://beta.nextjs.org/docs/routing/fundamentals
[ ] Tailwind config with CSS Variables
[ ] Font Optimization: https://beta.nextjs.org/docs/optimizing/fonts
[ ] Beautiful variable fonts by https://etceteratype.co/ (and Google Fonts)
[ ] Optimised images with https://beta.nextjs.org/docs/optimizing/images
[ ] File-based METADATA: https://beta.nextjs.org/docs/api-reference/metadata#file-based-metadata
[ ] Workable design merging OG https://magrippis.com/ & https://spotlight.tailwindui.com/
——⬇️ BONUS ⬇️——
[ ] MDX: Markdown-powered blogposts: https://beta.nextjs.org/docs/guides/mdx
[ ] Usage with MDX remote: https://github.com/hashicorp/next-mdx-remote
[ ] Sticky Header
[ ] Dark Mode
[ ] 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 😉: https://discord.gg/eR5Q52Sfm3

Between the comment section and the socials, let me know **somewhere** what you’d like me to cover next 🙌 .