nextra VS astro

In this article, you will learn how Nextra can be used to generate a static documentation site and we also provide an example.

Nextra, a powerful framework built on top of Next.js, has been empowering developers to create content-focused websites effortlessly.

Been using https://github.com/shuding/nextra in the past, really loved MDX + nextjs, anything better now?

At this point for jargons.dev, I have muted that it will be an Open Source dictionary that can accept word contribution, it will not require a server, it will rely on GitHub as backend, using a bunch of md files similar to The Odin Project and doc sites implemented like Nextra (this was infact my knight in shiny armor, I was looking to build jargons.dev with Nextra) but I also want to make contributing to the dictionary fun, and lovable with a streamlined contribution experience.

Not quite the same use case, but I've been really enjoying using https://nextra.site/ to create a static documentation site for one of my projects.

It's managed to strike a good balance of getting out the way and letting me mostly just write plain markdown, whilst being able to fall back to react components if needed.

With CD to GitHub pages on merge to main I think it's a pretty good experience

co-author here

we put in a lot of effort into our docs and we'd greatly appreciate any criticism or feedback! Langfuse is powerful but the docs should help beginners to quickly get started and then incrementally use more features.

docs are OSS, repo: https://github.com/langfuse/langfuse-docs

built using: https://github.com/shuding/nextra

However, this may just be due to the lack of proper documentation from the Nextra side of things (shoutout to Nextra though, regardless).

Nextra - Nextra is another option for creating documentation sites. While it might not be as well-known as Docusaurus, Nextra offers a modern and minimalist approach to building documentation. It is designed to be lightweight and user-friendly, making it a good choice for those who prefer a simple and clean documentation style. You can explore more about Nextra on their official website.

I have looked at https://nextra.site/ but that doesn't work with the app router yet. So I'm wondering if there's another alternative.

GitHub

Official Astro Documentation

Astro: Allows you to use multiple frameworks and supports SSR.

import { defineConfig } from 'astro/config'; // https://astro.build/config export default defineConfig({ output: 'server', });

astro is a modern framework "optimised for content heavy websites" i.e. vanilla assets mostly except when asked for something more.

[1] https://astro.build/

// @ts-check import { defineConfig } from 'astro/config'; import starlight from '@astrojs/starlight'; // https://astro.build/config export default defineConfig({ integrations: [ starlight({ // Site title title: 'Bizarre Binary Docs', // Site description description: `Welcome to Bizarre Binary, your trusted companion for exploring the vast expanse of space.`, }), ], });

My portfolio’s use case was so simple that I could have easily used HTML, CSS, and JavaScript. But how would I then tell you about Astro, an underrated yet incredible JavaScript framework? I even recently wrote an article for Hygraph about Astro and its versatility as an all-in-one framework.

Next, you build the site.\ Since SEO is a priority, server-side rendering (SSR) is a must. There's a lot of talk about Google being able to parse JavaScript, but that's mostly nonsense. Sometimes it can, but it generally hates doing so, so don’t risk it. You could use a heavy SSR setup for React or Angular, but we went with astro.build—super fast, simple, and elegant. They have plenty of free and complex themes, but we settled on their Starlight theme after tweaking the home page a bit (you need to copy the Hero.astro component and override Head.astro).

The philosophy of Astro is one of performance, flexibility, and customization. A web framework that prides itself on rendering as much as it can on the server first, allowing you to choose where your content lives, and giving you as many handles as possible to customize it how you like. The datagrid library you go with should be the same.