• Next.js + Org + Mdx

A next.js plugin that adds support for org mode files with mdx!

** Installation

#+BEGIN_EXAMPLE npm install --save next-orga orga-loader @mdx-js/loader #+END_EXAMPLE

or

#+BEGIN_EXAMPLE yarn add next-orga orga-loader @mdx-js/loader #+END_EXAMPLE

** Usage

Create a =next.config.js= in your project

#+BEGIN_SRC js // next.config.js const withOrg = require('next-orga')() module.exports = withOrg() #+END_SRC

Optionally you can provide [[https://github.com/mdx-js/mdx#options][MDX options]]:

#+BEGIN_SRC js const emoji = require("remark-emoji"); // next.config.js const withOrg = require('next-orga')({ options: { remarkPlugins: [emoji], hastPlugins: [], }, }) module.exports = withOrg() #+END_SRC

Optionally you can add your custom Next.js configuration as a parameter

#+BEGIN_SRC js // next.config.js const withOrg = require('next-orga')() module.exports = withOrg({ webpack(config, options) { return config }, }) #+END_SRC

** Top level .mdx pages

Define the =pagesExtensions= option to have Next.js handle =.org= files in the =pages= directory as pages:

#+BEGIN_SRC js // next.config.js const withOrg = require('next-orga')({ extension: /.org?$/, }) module.exports = withOrg({ pageExtensions: ['js', 'jsx', 'org'], }) #+END_SRC

** Syntax

To write mdx forms use =begin_export= blocks. These blocks become jsx, import, export and elements. Here is an example:

#+begin_src org ,#+begin_export import import { ReactComponent } from "unicorns-are-awesome"; ,#+end_export

** An org doc

,#+begin_export jsx ,#+end_export

A code block with info strings

,#+begin_src javascript repl // gets a repl const unicorns = "are awesome!"; ,#+end_src #+end_src

** Example

A full example is available in the [[https://github.com/k2052/org-to-markdown/tree/master/examples/next][examples]]