Space Jelly - Web Development Tutorials for _This_ Universe

Latest

  • How to Add a Sitemap & RSS Feed in Next.js App Router

    Sitemaps and RSS feeds may feel like dated technology, but they’re critical components of making a blog or content-driven site discoverable. Luckily, Next.js makes it super easy in the App Router to get dynamic feeds set up. What is a Sitemap? A sitemap is ususally an XML document that includes a comprehensive list of links...

Tutorials by Tech

  • Next.js
  • React
  • Cloudinary
  • Node.js

Featured Course

View All Courses
Create an eCommerce Store with Next.js and Stripe Checkout

Newsletter

Get new web dev tutorials in your inbox!

Sign up to receive all things Space Jelly and more free content straight to your inbox!

Some More Recent Posts

  • How to Build an AI Voice Translator in Next.js with Web Speech API & OpenAI

    As the world becomes more connected, it’s even more critical to be able to communicate in languages other than our own. Using simple browser APIs and tools like OpenAI’s GPT, we can create a custom translator app that translates whatever we say to a wide variety other languages. What is the Web Speech API The...

  • How to Style Active Links in Next.js App Router

    Nearly all websites have some form of navigation and a common pattern is styling the active link, or the link that represents the current page. This is typically simple with easy access to the current path, but how does that work with the Next.js App Router? Tip: We step through a bit of context before...

  • How to Build a Blog with Next.js App Router & Headless Hashnode

    One of the biggest pain points of building a blog is figuring out where to write and mange your posts. There is no shortage of Headless CMS options out there, so its important to figure out what makes them special, including a great UX and… one that promotes your blog for you? What is Hashnode?...

  • How to Share Selected Text in React with the Selection API

    Social sharing buttons are great for sharing a link, but it misses the interesting part that people want to share, the content! We can use the Selection API to read text selected on a page allowing our visitors to easily share any text from a page. Getting Text Selections in React with the Selection API...

  • How to Detect Clicks Anywhere on a Page in React

    Detecting clicks is a fundamental way to engage with your visitors on interaction. While it’s easy to detect clicking on something, what about clicking outside of it? Adding Event Handlers in React Often when working with interactions, you’re looking to detect a click or some kind of event directly related to a specific element. This...