Vercel + Nextra
Author: Claudio
Date: 24.10.2024
This presentation shows the usage of Vercel and Nextra to build a documentation site. The main advantages of using Vercel and Nextra are the maintainability, speed, and ease of deployment.
Description
Vercel, the creator of Next.js, is a cloud platform for Static Sites and Serverless Functions that improves the speed and delivery of frontend development. Some of the features of Vercel include:
- Edge Network (CDN): Deploy your site to a global network of servers.
- Serverless Functions & API Routes: Deploy serverless functions with ease.
- Edge Middleware: Add custom logic to your site at the edge.
- Continuous Deployment: Automatically deploy your site on every push to your repository (including feature branches and instant rollback).
- Vercel Toolbar: A tool that assists in the iteration and development process such as comments, Feature Flags, Layout Shift, and more.
- Analytics & Monitoring: Get insights into your site’s performance.
- Incremental Static Regeneration (ISR): Rebuild static pages (or single files) in the background when they are requested.
- Image Optimization: Optimize and cache images for faster loading.
- Cron Jobs: Schedule tasks to run at specific times.
Nextra is a Next.js documentation generator that uses Markdown and Reach to create content (.mdx).
The main features of Nextra include:
- Markdown with MDX: Use React components in Markdown.
- Syntax Highlighting: Highlight code blocks.
- Table of Contents: Automatically generate a table of contents.
- Search: Add search functionality to your documentation.
- Localization: Add multiple languages to your documentation.
- Custom Components: Create custom components for your documentation.
Examples
Please refer to index.mdx for how to create a Tip of the Week, and nextra.mdx for how to use Nextra.