Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remcohaszing/recma-nextjs-static-props
Expose top-level identifiers in Next.js app.js
https://github.com/remcohaszing/recma-nextjs-static-props
mdx mdxjs next nextjs recma recma-plugin unified
Last synced: about 2 months ago
JSON representation
Expose top-level identifiers in Next.js app.js
- Host: GitHub
- URL: https://github.com/remcohaszing/recma-nextjs-static-props
- Owner: remcohaszing
- License: mit
- Created: 2022-05-10T17:08:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-02T09:13:20.000Z (6 months ago)
- Last Synced: 2024-10-20T02:51:29.707Z (2 months ago)
- Topics: mdx, mdxjs, next, nextjs, recma, recma-plugin, unified
- Language: JavaScript
- Homepage: https://recma-nextjs-static-props.vercel.app
- Size: 750 KB
- Stars: 20
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# recma-nextjs-static-props
[](https://github.com/remcohaszing/recma-nextjs-static-props/actions/workflows/ci.yaml)
[](https://codecov.io/gh/remcohaszing/recma-nextjs-static-props)
[](https://www.npmjs.com/package/recma-nextjs-static-props)
[](https://www.npmjs.com/package/recma-nextjs-static-props)
Generate [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching/get-static-props)
exposing top level identifiers
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
- [Options](#options)
- [Example](#example)
- [Compatibility](#compatibility)
- [Related Projects](#related-projects)
- [License](#license)
## Installation
```sh
npm install recma-nextjs-static-props
```
## Usage
This plugin is intended for use with [Next.js](https://nextjs.org) and [MDX](https://mdxjs.com). It
injects a `getStaticProps` function which exposes all top level identifiers. This means these
variable are available in [`pages/_app.js`](https://nextjs.org/docs/advanced-features/custom-app).
```js
import nextMDX from '@next/mdx'
import recmaNextjsStaticProps from 'recma-nextjs-static-props'
const withMDX = nextMDX({
options: {
recmaPlugins: [recmaNextjsStaticProps]
}
})
export default withMDX()
```
This roughly transforms the following MDX:
```mdx
export const title = 'My document'
export const description = 'This is my document'
Hello Next
```
into the following JavaScript:
```js
import { jsx } from 'react/jsx-runtime'
export const title = 'My document'
export const description = 'This is my document'
export default function MDXContent() {
return jsx('p', { children: ['Hello Next'] })
}
export const getStaticProps = () => ({
props: JSON.parse(
JSON.stringify({
description,
title
})
)
})
```
## API
The default export is a recma plugin which exposes variables from the top-level scope in
[Next.js](https://nextjs.org) through `getStaticProps`.
### Options
- `name`: The name of the export to generate. (Default: `'getStaticProps'`)
- `include`: A list to filter identifiers to include in the generated function. This list may
include strings which must be matched exactly, a regular expression to test against, or a function
that will be called with the value to test, and must return a boolean. If a value is specified
which doesn’t exist in the document, it will be ignored. By default everything will be included.
- `exclude`: The same as `include`, but matching values will be excluded instead.
## Example
The source code repository for this plugin is setup as a [Next.js](https://nextjs.org) project. It
uses both [`rehype-mdx-title`](https://github.com/remcohaszing/rehype-mdx-title) and
[`remark-mdx-frontmatter`](https://github.com/remcohaszing/remark-mdx-frontmatter).
To try it yourself, simply clone, install, and run this project:
```sh
git clone https://github.com/remcohaszing/recma-nextjs-static-props.git
cd recma-nextjs-static-props
npm ci
npm run dev
```
## Compatibility
This project is compatible with Node.js 16 or greater.
## Related Projects
This plugin works well with the following [MDX](https://mdxjs.com) plugins:
- [`rehype-mdx-title`](https://github.com/remcohaszing/rehype-mdx-title)
- [`remark-mdx-frontmatter`](https://github.com/remcohaszing/remark-mdx-frontmatter)
## License
[MIT](LICENSE.md) © [Remco Haszing](https://github.com/remcohaszing)