TypeScript

Nextra is built with TypeScript and provides excellent TypeScript support out of the box. This guide will help you leverage TypeScript in your Nextra project.

Getting Started

To use TypeScript in your Nextra project, you need to:

Install TypeScript and types packages as devDependencies

npm i -D typescript @types/react @types/node

tsconfig.json

You can manually create a tsconfig.json file in the root of your project or rename the extension of some of the existing files to .ts or .tsx and then Next.js will detect TypeScript in your project and create a tsconfig.json file for you.

Type Definitions

Nextra provides type definitions for distribution code for its components and configurations. You can leverage these types by renaming your theme configuration file to .ts or .tsx extension and importing a theme config type, e.g. for nextra-theme-docs:

theme.config.tsx
import type { DocsThemeConfig } from 'nextra-theme-docs'
 
const config: DocsThemeConfig = {
  // Your theme configuration
}
export default config

By leveraging TypeScript in your Nextra project, you can catch errors early, improve code quality, and enhance the developer experience with better autocompletion and type inference.