rufuspollock / ideas

Ideas for (tech) stuff to research, build or work on.
https://rufuspollock.com/
50 stars 4 forks source link

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

Open rufuspollock opened 2 years ago

rufuspollock commented 2 years ago

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

Starter Packs / Templates

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 commented 1 year ago

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.