Next.js

Use @orgajs/next to write Next.js pages in Org Mode (.org) and compile them with orgx.

Standalone repository:

Quick Start

  1. Install the integration:
pnpm add @orgajs/next @orgajs/loader @orgajs/react
  1. Register it in next.config.js:
const withOrg = require('@orgajs/next')()
 
module.exports = withOrg({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'org'],
})
  1. Create a page at app/page.org (or pages/index.org):
* Hello from Org Mode
 
This page is rendered from Org Mode in Next.js.
  1. Start Next.js:
pnpm next dev

Major Features

Native .org routes in Next.js

Org files can be used as top-level routes in Next.js once pageExtensions includes org.

Works with App Router and Pages Router

You can place Org pages in either:

  • app/**/page.org
  • pages/**/*.org

Global Org component mapping

Create org-components.js at project root to override rendered elements globally. 

export function useOrgComponents() {
  return {
    h1: (props) => <h1 style={{ color: 'tomato' }} {...props} />,
  }
}

orgx-powered compilation

This integration uses @orgajs/loader under the hood, providing Org Mode to JSX compilation and compatibility with orgx features.

Notes