Our great sponsors
-
nextra
Simple, powerful and flexible site generation framework with everything you love from Next.js.
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
` will be rendered as: ```jsx filename="My File" showLineNumbers /App/ {2} function App() { return Hello } ``` #### Next SEO Builtin Out of the box, `nextra-theme-docs` has Next SEO installed. By default, in the front matter you can set `title`, `description`, `canonical` and `openGraph` and they will be passed directly to the `` component. ```md filename="Markdown" --- title: "Nextra 2" description: "Nextra – Next.js Static Site Generator" --- ``` will be passed to Next SEO and rendered on the page as: ```html Nextra 2 ``` You can manually pass Next SEO props with `useNextSeoProps` theme option. [Read more](https://nextra.site/docs/docs-theme/theme-configuration#seo-options) in the docs. #### I18n Support `nextra-theme-docs` comes with support i18n in your website. To use it, provide Next.js' `i18n` field with `locales` and `defaultLocale` setup: ```js filename="next.config.js" export default withNextra({ i18n: { locales: ['en-US', 'fr-FR'], defaultLocale: 'en-US' } }) ``` Add Nextra's middleware: ```js filename="middleware.js" export { locales as middleware } from 'nextra/locales' ``` Create your `_meta` and page files with locales suffixes: ```text ├── pages │ ├── _meta.en-US.json │ ├── _meta.fr-FR.json │ ├── index.en-US.mdx │ ├── index.fr-FR.mdx ``` ```mdx filename="index.en-US.mdx" # 🇺🇸 Hello Nextra 2 ``` ```mdx filename="index.fr-FR.mdx" # 🇫🇷 Bonjour Nextra 2 ``` [Learn more](https://nextra.site/docs/guide/i18n) on docs. #### LTR/RTL Direction Support Your website can be fully mirrored with RTL direction. All that you need it provides `dir: 'rtl'` in your `theme.config.jsx` file. #### A11y Accessibility is all, Nextra respects system preferences, animation will be reduced with `reduce-motion` mode, colors will be adjusted in `contrast-more` mode. ## Conclusion [The Guild](/) discovered Nextra 2 from the first betas and actively participated in the development and improvement of this library. I (Dimitri) become [an official maintainer](https://nextra.site/about#team) of this library on par with Nextra creator amazing [Shu Ding](https://github.com/shuding/nextra) from Vercel. In the end, we migrated all our projects' documentation to Nextra, which provides a better setup and documentation design than our previous `guild-docs` package. Alongside we added Giscus comments at the end of each page that synchronizes with GitHub discussions. We receive a bunch of positive feedback and much more contributions and fixing mistakes in our docs from our community ❤️. In fact, even this blog uses Nextra 2 and `nextra-theme-docs`. 👀
Prismjs was replaced by Shiki and rehype-pretty-code.
Full-text search is powered by FlexSearch and Nextra will index all of your pages at build time ⚡.
Prismjs was replaced by Shiki and rehype-pretty-code.