Next Site

Gatsby is a static site generator while Next.js is for building React universal apps, apps with server-side rendering included.

Gatsby is a static site generator for React. It adheres to the JAMstack and implements the PRPL (Push, Render, Pre-Cache, Lazy-Load) pattern making generated site fast. It uses GraphQL to integrate data at build-time (not live data). It also has many plug-ins.

I find Gatsby too opinionated (prescriptive) with many new concepts to learn to do things I already know how to do in React.

The benefit of using Gatsby is that it generates a high performance static site.

Next is static and server-side application framework for React. It is more flexible and easier to use existing React patterns and libraries. You have to do more things yourself, like specifying resources to pre-fetch and lazy-load.

For building static and combined static and single-page applications (SPA) Next.js will be easier and more flexible.

Goals

• Build a static site with content written in Markdown.
• Content stored and readable in GitHub repo.
• 100% static output with no server.

Ideas

• An interesting option is offered by Quiver markdown editor which can export content as JSON. However we are then tied to a specific editor.
• Use GraphQL and resolver to return Markdown content, no longer 100% static.

Proof of Concept

• Use my preferred React libraries with Next.js? The most import for 100% static output are preferred CSS-in-JS libraries.
• Markdown authoring experience and ease of integration for rendering and navigation.
• Linking static assets/resources in content (images, files).
• Start with a single page, implement visual design, layout, core components (Header, Navigation).

CSS-in-JS

Using styled-components with Next.js shows how to configure babel correctly so you do not get checksum mismatches due to different class generation on the client and on the server.

Theme Provider this works in Next.js 6.

styled-system and system-components work fine.

Resources

• Next Plugins
• With styled-components
• With unstated
• MDX is a fully-featured MDX parser, loader and JSX renderer.
• next-blog ideas for rendering markdown/navigation/slugs etc.
• Taking Gatsby for a spin
• Gatsby + Apollo + GraphCool + Netlify "Now the pain begins. To restate my goals, I want Gatsby to generate the pages and Apollo to handle my data. But Gatsby seems to want my data too."

Markdown Editors

• Best Markdown editors for Mac gives a good review of a number of editors.
• Typora I like this one the most, simple, built in JS with Electron.
• Quiver "Programmer's Notebook" markdown editor looks nice, of course you can use any text editor. Quiver can export various formats including JSON and Markdown. Only downside is it looks like Quiver is built and maintained by a single developer.
• LightPaper includes Jekyll rendering so may be well suited to my requirement.
• Bear focused on note taking across macOs and iOS. Has its own cloud API.