Community Picks·2yReact Email 2.0 · Resend
React Email has released version 2.0 with new features including a mobile preview, revamped file tree, better user feedback, and improved error handling. The new version also has faster setup and start-up times. Code highlighting components have been added for displaying code in emails. The release is compatible with various package managers and can be deployed easily to Vercel.
Community Picks·2yHow I Built My Portfolio
Building a high-quality portfolio website goes beyond simple HTML and CSS. Utilizing an advanced tech stack like Next.js, Tailwind CSS, Shadcn UI, and Vercel can transform your static portfolio into a dynamic, professional site. The post explores the reasons for over-engineering, such as creating a better user experience, making your site scalable, and demonstrating a commitment to quality. It also highlights specific advantages of Next.js, like built-in SEO support, optimized image handling with the `next/image` component, and Partial Pre-rendering for combining static and dynamic content.
Community Picks·2yBuild a Landing Page with AI and Next.js
Learn how to build a landing page using Vercel's AI UI generator called v0 and Next.js. Generate UI using natural language prompts, iterate and refine the design, customize the visual style with the theme editor, and export the code to use in your Next.js project.
This Dot·2yBuild Facial Recognition and Chatbot AIs using TypeScript with Jack Herrington
Learn how to build a voice-activated AI assistant using OpenAI's Whisper and TTS models combined with Meta's Llama 3.1, integrated within a Next.js application. The guide covers setting up the client-side using Next.js, recording and sending audio for processing, and handling voice responses. The backend setup includes using OpenAI SDK and Vercel AI SDK for processing audio and generating responses.
Community Picks·2yrealvjy/nxt-lnk: Custom bio links for creatives who love coding. A perfect custom alternative for linktree, bio and other shortner platform.
A guide to using the `nxt-lnk` template for creating custom bio links, ideal for creatives who love coding. The template supports dark mode, can be self-hosted on Vercel or Netlify, and allows customization with minimal coding. It uses styled components for styling, and key files include `BioData.js` and `LinksData.js`. Instructions for setup, editing, and deployment are provided, along with examples of social media link configurations.
Supabase·2ySupabase + Vercel Partnership
Vercel has launched official First-Party Integrations, including Supabase, making it easier to manage Postgres databases directly from the Vercel dashboard. This integration supports Vercel Templates, unified billing, and offers dedicated Postgres instances, modular building blocks like AI and Auth, low latency with read replicas, and secure, scalable solutions. It's currently in Public Alpha as of August 28, 2024.
Community Picks·2yStart your own (side) business with open-source in mind
Starting a DevRel advisory business is exciting and straightforward with open-source tools. This guide covers setting up a website using Vercel, the Astro framework, Web3Forms for contact forms, Cal.com for scheduling calls, and Mirotalk for real-time communication. These tools facilitate a quick and efficient online presence, leveraging the benefits of open-source software.
Product Hunt·2yDokploy - Open-source alternative to Heroku, Vercel & Netlify
Dokploy is an open-source alternative to Heroku, Vercel, and Netlify. TailwindCSS has improved the speed and ease of styling customization in Dokploy. Drizzle ORM seamlessly integrates into the workflow for efficient and reliable data handling.
Hacker News·1yWhy we switched to Astro (and why it might interest you)
The post details the reasons and process behind migrating a website from Next.js to Astro. It highlights the benefits, such as simplified architecture and enhanced performance with server-side rendering. The new stack allows instant feedback for content edits and efficient caching strategies, resulting in a faster, more reliable user experience. Future articles will dive into practical aspects of using Astro with DatoCMS.
Community Picks·2yTurborepo 2.0
Turborepo 2.0 enhances the developer experience for JavaScript and TypeScript repositories with a new terminal UI, Watch Mode, and improved documentation. The new terminal UI allows for interactive tasks and clearer logs, while Watch Mode ensures dependency-aware task watching. The release also updates licensing to the MIT license and introduces a Long Term Support policy. Significant breaking changes include updates to `turbo.json` configuration and stricter environment variable handling. Users can upgrade to the latest version using `npx @turbo/codemod migrate`.
Code with Andrea·2yHow I Built a Modern Course Platform in 2024
The author built a modern course platform for Flutter developers, using technologies like Astro, Supabase, TypeScript, and TailwindCSS. They faced challenges with email link authentication. The running costs for the platform are estimated to be $214 per month. The author is offering a 33% discount on their courses.
Collections·2yBuild and Deploy Your Own RAG Chatbot with JavaScript
Learn to build and deploy a Retrieval Augmented Generation (RAG) chatbot using JavaScript, LangChain.js, Next.js, Vercel, and OpenAI through a 90-minute YouTube course by Ania Kubow on the freeCodeCamp.org channel. The course covers everything from integrating a vector database with DataStax, deploying to Vercel, and using a practical Formula 1 chatbot example for real-time data fetching. It's suitable for both beginners and experienced developers aiming to enhance their skill set.
Community Picks·2yBuilding an AI-powered ChatBot using Vercel, OpenAI, and Postgres
This guide provides step-by-step instructions on building an AI-powered chatbot using Vercel, OpenAI, and Postgres. It explains the fundamentals and benefits of word embeddings, the use of the pgvector extension in Postgres for similarity analysis, and how to create and fine-tune a chatbot API using these technologies. Additionally, it covers optimization techniques to enhance model performance and reduce costs.
Community Picks·2yDeploy Your Express Backend in Vercel for Free 🚀⚡
Learn how to deploy your Node.js Express application on Vercel for free using a few simple steps. Create a basic Express app, configure the vercel.json file to route requests, and use the Vercel CLI for deployment. Understand important considerations when switching to Vercel’s serverless architecture, such as handling database connections, websockets, and efficient error handling.
Vercel·2yFlags as Code in Next.js – Vercel
Learn how to use Vercel's Flags SDK to implement feature flags in Next.js applications. This guide covers the benefits of server-side evaluation, the integration with Vercel Toolbar, and how to use feature flags effectively with no flag provider or with external sources like Edge Config. Understand the principles of feature flags and their progression from simple hardcoded values to more advanced uses, ensuring safer and more efficient deployments.
This Dot·2yHow to build an AI assistant with OpenAI, Vercel AI SDK, and Ollama with Next.js
Build a voice-activated AI Assistant using Next.js, OpenAI's Whisper and TTS models, and Meta’s Llama 3.1 through the Vercel AI SDK and Ollama. The AI Assistant records audio, transcribes it to text, generates a response using the Llama model, converts the response to speech, and streams the audio back to the client. The setup involves configuring environmental variables, creating components for audio recording, setting up server-side routes for AI model interactions, and implementing client-side logic to handle the audio processing workflow.
habr·1yVercel's V0 AI: The Easiest Way to Build Web Apps
Vercel's V0 is a generative AI tool that transforms user input into production-ready code for web app development. Supporting frameworks like React, Vue, and Svelte, V0 allows users to describe their web applications in plain language or upload mockups, and the AI generates the app designs and code. It features text-to-app generation, image integration, responsive design, and Figma integration. While V0 simplifies the development process, manual refinement may be needed for complex interactions and large code blocks. Various pricing plans are available, starting with a free tier offering 200 credits.
Community Picks·1yvercel/ai-chatbot: A full-featured, hackable Next.js AI chatbot built by Vercel
Vercel has released an open-source AI chatbot template built with Next.js and the AI SDK. The chatbot supports multiple model providers, including OpenAI, Anthropic, and Cohere, and is styled with Tailwind CSS and Radix UI components. It uses Vercel Postgres and Vercel Blob for data persistence and NextAuth.js for secure authentication. You can deploy it to Vercel with ease and run it locally by configuring environment variables and using the Vercel CLI.
freeCodeCamp·2yBuild Your Own Wheel of Names
Explore a step-by-step guide to building a 'Wheel of Names' app inspired by the TV show Wheel of Fortune. This tutorial covers how to create an interactive, spinning wheel using technologies like React, TypeScript, Vite, and styled-components. Learn about the project structure, handling participant names, spinning animations, and deploying the app to Vercel. The app includes features for entering questions, adding participants, and dynamically updating the wheel based on user input.
ThePrimeTime·2yNextJS Is Hard To Self Host
Dax, the spearhead of the Open Next project, explains why hosting NextJS is complex and refutes the common notion that it's as simple as 'just throwing it in a Docker container.' NextJS's unique capabilities around infrastructure and performance require specific setups often tied to Vercel's advanced hosting platform. Open Next aims to provide solutions for these challenges through a community-driven reverse engineering effort. The discussion also touches on the broader implications of VC funding in open source projects, highlighting potential issues and benefits.
freeCodeCamp·2yHow to Secure a Next.js AI Application Deployed on Vercel
This guide provides a comprehensive approach to securing a Next.js AI application deployed on Vercel. It details how to identify and fix vulnerabilities, including the exposure of sensitive data, protection against DOS/DDOS attacks, and implementing authentication and authorization using GitHub OAuth. It covers setting up environment variables, using route handlers to keep sensitive data on the backend, and applying rate limiting to prevent excessive requests. Additionally, the guide includes practical coding examples and video explanations for ease of understanding.
