Use the next plugin for orga.


npm install --save @orgajs/loader @orgajs/react @orgajs/next


Add the following to next.config.js

const withOrga = require('@orgajs/next')({
  // extention: /\.org$/

module.exports = withOrga({
  pageExtensions: ['js', 'jsx', 'org']

Customisation (optional)

You can add "shortcodes" for use within org files without importing them every time. Edit pages/_app.js file.

import { OrgaProvider } from '@orgajs/react'
import Box from '../components/box'

function MyApp({ Component, pageProps }) {
  // add "shortcodes" by passing in react components via components prop
  return (
    <OrgaProvider components={{ Box }}>
      <Component {...pageProps} />

export default MyApp

After that, you can use <Box/> component in org file without importing it.