Real world Components, tutorials and guides for modern React.js & Next.js development.

the internet
i$ down

Build an AI Chatbot with Gemini 2.0 Flash in Next.js

AIChatbotNext.jsGeminiGemini Flash

A simple React component and Next.js API route to create a chatbot with product preview cards using Gemini 2.0 Flash.

Build a client-side AI Chatbot with Gemini 2.0 Flash in React

AIChatbotReactGeminiGemini Flash

A simple React component that renders a chatbot with product preview cards using Gemini 2.0 Flash.

Building a Real-World Compass Component in React

CompassDevice Orientation APIGeolocation API

Harnessing Device Orientation and Location APIs to build a real-world compass component in React.

Simple QR Code Generator

ComponentQRReact

A simple React component that generates a QR code from an input string.

Random UUID Generator

ComponentUUIDReact

A simple React component that generates a random UUIDV4.

Setting up a PWA in Next.js

How-toPWANext.js

The following details how to set up a PWA in a Next.js 15 App Router project. As well as adding an install button.

Setting Up a Development SSL Certificate for Local testing

How-toSSLNext.js

To enable features that require HTTPS, such as device orientation, you can set up a local SSL certificate using `mkcert` and then access your development site securely on both your PC and mobile device.

© 2025 cdnkr