From 25b306d3ce67299f8987bc7769be21103846c7ff Mon Sep 17 00:00:00 2001 From: Nicolas Javkin Date: Mon, 16 Sep 2024 18:43:01 -0300 Subject: [PATCH 1/2] Added typescript documentation --- docs/pages/docs/guide/advanced/typescript.mdx | 98 ++++++++++++++++++- 1 file changed, 94 insertions(+), 4 deletions(-) diff --git a/docs/pages/docs/guide/advanced/typescript.mdx b/docs/pages/docs/guide/advanced/typescript.mdx index 85c4cdb86c..bb513e7ea5 100644 --- a/docs/pages/docs/guide/advanced/typescript.mdx +++ b/docs/pages/docs/guide/advanced/typescript.mdx @@ -1,7 +1,97 @@ # TypeScript -import { Callout } from 'nextra/components' +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. - - This page is a stub. Help us expand it by contributing! - +## Getting Started + +To use TypeScript in your Nextra project, you need to: + +1. Install TypeScript and related dependencies: + +```bash +npm install typescript @types/react @types/node +``` + +2. Create a `tsconfig.json` file in the root of your project: + +```json +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "incremental": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "include": ["next-env.d.ts", "/.ts", "/.tsx"], + "exclude": ["node_modules"] +} +``` + +This configuration is based on the `tsconfig.json` file found in the Nextra docs +project. + +## Type Definitions + +Nextra provides type definitions for its components and configurations. You can +leverage these types in your `theme.config.tsx` file: + +```tsx +import type { DocsThemeConfig } from 'nextra-theme-docs' + +const config: DocsThemeConfig = { + // Your theme configuration +} +export default config +``` + +3. When working with MDX compilation, Nextra uses TypeScript to define plugin + types and options: + +```tsx +import type { ProcessorOptions } from '@mdx-js/mdx' +import type { Root } from 'mdast' +import type { Plugin } from 'unified' + +// ... plugin implementations +``` + +## TypeScript in MDX + +You can use TypeScript in your MDX files by adding the `tsx` language identifier +to your code blocks: + +```tsx +const MyComponent = () => { + return
Hello, World!
+} +``` + +4. For theme development, Nextra provides type definitions for theme + configurations. For example, in the docs theme: + +```tsx +import type { DocsThemeConfig } from 'nextra-theme-docs' + +const config: DocsThemeConfig = { + // Your theme configuration +} +export default config +``` + +5. Nextra uses TypeScript to ensure type safety when working with configuration +options, page maps, and other data structures throughout the project. + +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. From 5683cf6a2d87b42cc45f0fd8b68f1b8fe9cf4363 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 28 Sep 2024 02:38:33 +0200 Subject: [PATCH 2/2] upd --- docs/pages/docs/guide/advanced/typescript.mdx | 85 ++++--------------- 1 file changed, 17 insertions(+), 68 deletions(-) diff --git a/docs/pages/docs/guide/advanced/typescript.mdx b/docs/pages/docs/guide/advanced/typescript.mdx index bb513e7ea5..16ff591fc3 100644 --- a/docs/pages/docs/guide/advanced/typescript.mdx +++ b/docs/pages/docs/guide/advanced/typescript.mdx @@ -1,3 +1,5 @@ +import { Steps } from 'nextra/components' + # TypeScript Nextra is built with TypeScript and provides excellent TypeScript support out of @@ -7,80 +9,30 @@ the box. This guide will help you leverage TypeScript in your Nextra project. To use TypeScript in your Nextra project, you need to: -1. Install TypeScript and related dependencies: + +### Install TypeScript and types packages as `devDependencies` -```bash -npm install typescript @types/react @types/node +```sh npm2yarn +npm i -D typescript @types/react @types/node ``` -2. Create a `tsconfig.json` file in the root of your project: +### `tsconfig.json` -```json -{ - "compilerOptions": { - "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": false, - "forceConsistentCasingInFileNames": true, - "noEmit": true, - "incremental": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve" - }, - "include": ["next-env.d.ts", "/.ts", "/.tsx"], - "exclude": ["node_modules"] -} -``` +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. -This configuration is based on the `tsconfig.json` file found in the Nextra docs -project. + ## Type Definitions -Nextra provides type definitions for its components and configurations. You can -leverage these types in your `theme.config.tsx` file: - -```tsx -import type { DocsThemeConfig } from 'nextra-theme-docs' - -const config: DocsThemeConfig = { - // Your theme configuration -} -export default config -``` - -3. When working with MDX compilation, Nextra uses TypeScript to define plugin - types and options: - -```tsx -import type { ProcessorOptions } from '@mdx-js/mdx' -import type { Root } from 'mdast' -import type { Plugin } from 'unified' - -// ... plugin implementations -``` - -## TypeScript in MDX - -You can use TypeScript in your MDX files by adding the `tsx` language identifier -to your code blocks: +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`: -```tsx -const MyComponent = () => { - return
Hello, World!
-} -``` - -4. For theme development, Nextra provides type definitions for theme - configurations. For example, in the docs theme: - -```tsx +```tsx filename="theme.config.tsx" import type { DocsThemeConfig } from 'nextra-theme-docs' const config: DocsThemeConfig = { @@ -89,9 +41,6 @@ const config: DocsThemeConfig = { export default config ``` -5. Nextra uses TypeScript to ensure type safety when working with configuration -options, page maps, and other data structures throughout the project. - 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.