Frameworks on top of next.js for building content-driven sites (esp using local files)

[rufuspollock]

What frameworks are there that are built on top of nextjs? Particularly, ones oriented whose content is driven off local files (markdown / MDX)?

So far, my sense is best option is tina using the graphql interface (perhaps even from the library without running the server)

NB: one alternative to a framework is an extensive "template / starter pack" for building a site.

UPDATE: June 2022

So we've ended up helping build one ourselves at Datopian called Flowershow

https://flowershow.app

https://github.com/datopian/flowershow

Research

See also this list: https://github.com/stars/rufuspollock/lists/nextjs-frameworks-themes

Frameworks

• https://blitzjs.com (pivoting IIRC)
• https://github.com/elmasse/nextein
• https://nextra.vercel.app (looks like a v2.0 is in the works according to this 6 jan 2022 tweet https://twitter.com/shuding_/status/1478877774081318920 )
• TinaCMS: https://tina.io - see item below

Starter Packs / Templates

• https://github.com/timlrx/tailwind-nextjs-starter-blog - 1.9k ⭐ (jan 2022) - This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

TinaCMS

Here's a question i asked on their discord channel:

Hi, suppose i'm doing a pure static site. Can I use the tina graphql layer but call it from code in nextjs getStaticProps? Or do i have to run the server and then call the server ...?

Put more explicitly is their a library endpoint to the graphql layer that i can use without running the server on port 4001?

The answer i found:

To answer myself: is the examples here what I'm looking for? https://github.com/tinacms/tinacms/discussions/2249 + https://github.com/tinacms/tinacms/blob/main/packages/%40tinacms/cli/GeneratedClientDocs.md

Answer from tina devs was:

This is a great question, and to add a bit of context the SDK does require for the GraphQL server to be running. But to answer your more broad question, you could do this without any http if your request is guaranteed to be statically executed at build time (getStaticProps and getStaticPaths). The reason we don't promote this pattern is that we'll soon be introducing the ability to make requests at runtime (and at that point, the filesystem often won't be there), so there would be a big difference in what's possible between getStaticProps and getServerSideProps logic, which we'd like to avoid.

So, in short - yes you can do this- but this isn't a stable API so beware this could change:

import {
  FilesystemStore,
  FilesystemBridge,
} from '@tinacms/datalayer'
import { resolve } from '@tinacms/graphql'

const bridge = new FilesystemBridge(rootPath)
const store = new FilesystemStore({rootPath})
const database = await createDatabase({ store, bridge })

const result = await resolve({
  database,
  query,
  variables,
})

You can see those in action: https://github.com/tinacms/tinacms/blob/main/packages/%40tinacms/cli/src/cmds/start-server/index.ts#L67-L72

And here - https://github.com/tinacms/tinacms/blob/main/packages/%40tinacms/cli/src/cmds/start-server/server.ts#L54-L58

[LiveDuo]

Destack is built on top of Next.js (I'm the maintainer).

It's a landing page builder that works locally and stores data in a local json file within the repository. It has no external dependencies and other other extra config to deploy a landing page within any Next.js project.