Best of Vercel2024

  1. 1
    Article
    Avatar of communityCommunity Picks·2y

    React 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.

  2. 2
    Article
    Avatar of communityCommunity Picks·2y

    How 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.

  3. 3
    Article
    Avatar of communityCommunity Picks·2y

    Build 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.

  4. 4
    Article
    Avatar of thisdotThis Dot·2y

    Build 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.

  5. 5
    Article
    Avatar of communityCommunity Picks·2y

    realvjy/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.

  6. 6
    Article
    Avatar of supabaseSupabase·2y

    Supabase + 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.

  7. 7
    Article
    Avatar of communityCommunity Picks·2y

    Start 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.

  8. 8
    Article
    Avatar of phProduct Hunt·2y

    Dokploy - 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.

  9. 9
    Article
    Avatar of hnHacker News·1y

    Why 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.

  10. 10
    Article
    Avatar of communityCommunity Picks·2y

    Turborepo 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`.

  11. 11
    Article
    Avatar of phProduct Hunt·2y

    Code&Line - Note-taking app for developers

    A post about using Plausible Analytics for data insights, Vercel for infrastructure, and NextUI components for building user interfaces.

  12. 12
    Article
    Avatar of opensourcefrontendOpen Source Front End·1y

    PORTFOLIO WEBSITE

    A developer shares their excitement about launching a new portfolio website. Check out the link to explore the portfolio design and content.

  13. 13
    Article
    Avatar of vercelVercel·2y

    FastHTML projects can now be deployed with zero configuration – Vercel

    FastHTML, a new web framework for fast, scalable web applications, can now be deployed on Vercel with zero configuration. It builds on ASGI and HTMX and can be initiated with Vercel CLI or by pushing to a git repository.

  14. 14
    Article
    Avatar of codewithandreaCode with Andrea·2y

    How 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.

  15. 15
    Article
    Avatar of communityCommunity Picks·2y

    Vercel + Puppeteer

    Learn how to use Puppeteer with Vercel to generate PDFs of websites. Discover best practices for setting up Puppeteer for Vercel and deploying your Puppeteer code on Vercel.

  16. 16
    Article
    Avatar of collectionsCollections·2y

    Build 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.

  17. 17
    Article
    Avatar of communityCommunity Picks·2y

    Building 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.

  18. 18
    Article
    Avatar of communityCommunity Picks·2y

    Deploy 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.

  19. 19
    Article
    Avatar of vercelVercel·2y

    Flags 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.

  20. 20
    Article
    Avatar of thisdotThis Dot·2y

    How 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.

  21. 21
    Article
    Avatar of habrhabr·1y

    Vercel'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.

  22. 22
    Article
    Avatar of communityCommunity Picks·1y

    vercel/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.

  23. 23
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    Build 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.

  24. 24
    Video
    Avatar of primeagenThePrimeTime·2y

    NextJS 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.

  25. 25
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How 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.