Guides

How to Integrate Optimizely Feature Experimentation with Next.js and Vercel

This guide covers setting up feature flags, implementing A/B tests, and optimizing performance using React Server Components and streaming.

How to Optimize RSC Payload Size

Learn how to use React Server Components efficiently in Next.js to reduce cost and improve performance

Optimizing hard navigations

Learn how to improve performance for navigations that require a full page reload

How can I increase the limit of redirects or use dynamic redirects on Vercel?

Instructions on how to use Serverless Functions to handle redirects on Vercel.

ISR Observability: Framework Discrepancies

Understanding ISR Observability with Different Frameworks

Using Fathom Analytics with Next.js

Learn how to integrate Fathom Analytics with Next.js.

Optimizing Core Web Vitals in 2024

Learn how to optimize Core Web Vitals for your site, including INP, CLS, LCP, and more.

Does Vercel support Ruby on Rails applications?

Learn how you can use Ruby on Rails with your frontend on Vercel.

How do I generate a “sitemap.xml” for my Next.js app on Vercel?

Guidance on how to generate a "sitemap.xml" at build time and runtime.

How can I run Next.js on localhost through HTTPS?

Learn how to create a self-signed certificate for use with local Next.js development.

How to detect when user leaves the page and display a confirmation dialog?

Learn how to use React and Next.js to show an alert asking the user to confirm they want to exit a page using the window beforeunload event listener.

How can I share my Vercel cache across deployments?

Learn how to reuse cached responses across deployments with the Next.js App Router and the Vercel Data Cache.

Enhancing Security for Redirects and Rewrites

Learn how security measures in URI handling can prevent semantic attacks, where malicious hosts exploit redirects and rewrites to mimic trusted sites, leading to phishing and data breaches.

How to Load Data from a File in Next.js

Learn how to display and read the contents of a static json file in your Next.js application.

Understanding XSS Attacks

Learn about XSS attacks, their types, risks, and effective prevention strategies in this comprehensive guide for web security.

Understanding Cookies

Discover how web cookies function, the importance of cookie attributes for security, and methods for inspecting and debugging cookies.

Understanding CSRF attacks

Understand the mechanics and risks of Cross-Site Request Forgery (CSRF) attacks, and discover crucial development practices, like anti-CSRF tokens and appropriate use of HTTP methods, to fortify web applications against such threats

Understanding the SameSite cookie attribute

Explore the SameSite cookie attribute's significance in ensuring web security and user privacy to strike the right balance between security and usability.

First Input Delay (FID) vs. Interaction to Next Paint (INP)

Learn about the differences between FID and INP and how to optimize your website's INP score.

Displaying headlines in social previews with Vercel OG

Twitter/X is planning to remove headlines from social previews. To get around this limitation, Vercel OG offers a way to display article titles directly inside OG images.

Building an AI Chatbot with Cohere, Next.js, and the Vercel AI SDK

Learn how to build a generative AI application using Cohere, Next.js, and Vercel.

Using PostHog with the Next.js App Router and Vercel

Learn how to use PostHog with Next.js and Vercel to add analytics, feature flags, and more.

How can I make my library compatible with the Vercel Edge Functions runtime?

Learn how to make your library or SDK compatible with Vercel Edge Functions and Vercel Edge Middleware.

Creating a Session Store with Redis and Next.js

Learn how to durably store sessions with Redis and Next.js.

Using SvelteKit Form Actions

This guide explains how to use form actions in SvelteKit to handle form submissions, process form data, and enhance form interactions, providing seamless integration with the endpoint system.

How can I use Python and JavaScript in the same application?

Unlock the power of Python and JavaScript in your apps. Learn to integrate Flask and Next.js for dynamic frontends with AI-capable backends. Perfect for developers keen on hybrid programming.

Using React Context for State Management with Next.js

Learn how to use React context inside Next.js in both client and server components for state management in your application.

What can I do when I run into build output limits with Next.js on Vercel?

Learn how to work with build output limits for Next.js on Vercel.

Building Ecommerce Sites with Next.js and Shopify

Learn how to integrate Next.js and Shopify together for the fastest storefronts using the Storefront GraphQL API.

What are the best practices for hosting videos on Vercel?

Learn the ideal solutions for using video files like .mp4 and .gif on Vercel to prevent excess bandwidth consumption.

How do I reduce my build time with Next.js on Vercel?

When building a Next.js project with thousands of static pages, you may hit the maximum build time per deployment limit of 45 minutes. Learn some strategies for reducing your build times by reducing computation during each build.

How can I prerender my application on Vercel?

Learn how to enable prerendering with your frontend framework on Vercel for better performance and SEO.

How to Deploy a Vue.js Site with Vercel

Create your Vue.js app and deploy it with Vercel.

Add Auth to a Next.js Site with Magic.link

Learn how to add user authentication to a Next.js site using Magic.link.