Expose top-level identifiers in Next.js app.js

Last update: Jun 5, 2022

recma-nextjs-static-props

Generate getStaticProps exposing top level identifiers

Installation

npm install recma-nexjs-static-props

Usage

This plugin is intended for use with Next.js and MDX. It injects a getStaticProps function which exposes all top level identifiers. This means these variable are available in pages/_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:

export const title = 'My document'
export const description = 'This is my document'

Hello Next

into the following JavaScript:

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 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 project.

To try it yourself, simply clone, install, and run this project:

git clone https://github.com/remcohaszing/recma-nextjs-static-props.git
cd recma-nextjs-static-props
npm ci
npm run dev

Related Projects

This plugin works well with the following MDX plugins:

License

MIT © Remco Haszing

GitHub

https://github.com/remcohaszing/recma-nextjs-static-props
You might also like...

100 lines of code Hackernews reader (with the help of next.js).

About This is an isomorphic react app, displaying stories from hackernews made with super nice next.js. It's just about 100 lines of code. Nothing ser

May 31, 2022

Rauchg Blog - Blog built by a Next.js core maintainer.

blog This is the blog that powers rauchg.com, built on next.js and deployed to the cloud via Vercel. How to run First, install Vercel CLI. Development

Jun 23, 2022

📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.

📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.

Dashboard Create your own team dashboard with custom widgets. Table of Contents Installation Server Development Production Docker Create a Dashboard A

Jun 24, 2022

🦅 Gank api base △ next.js (react&ssr)

🦅 Gank api base △ next.js (react&ssr)

Introduction next.js(react ssr repo) and gank api Features Use react SSR framework next.js UI ant design antd Mobile UI ant design antd-mobile Support

Apr 11, 2022

A working example of a decoupled implementation using Next.js and GraphQL with the eZ Platform CMS

Decoupled CMS example with GraphQL and Next.js This repository contains the source code for the sample application from the talk "Easy decoupled siteb

Aug 22, 2021

Next.js website to list DJ and other musical events

Next.js website to list DJ and other musical events

Next.js website for DJ Events. This is part of my Next.js course on Udemy

Jun 15, 2022

Amazon clone with Next JS

Amazon clone with Next JS

Amazon clone with Next JS

Apr 26, 2022

Hotflix: A Netflix Clone uilt with Next.js

 Hotflix: A Netflix Clone uilt with Next.js

Hotflix: A Netflix Clone uilt with Next.js, Movie data was pulled from TMDB and trailer videos from Youtube.

Jun 18, 2022

Airbnb UI clone using Next.js + styled-components.

Airbnb UI clone using Next.js + styled-components.

Jun 17, 2022
A static blog build on top of Notion and NextJS, deployed on Vercel.
A static blog build on top of Notion and NextJS, deployed on Vercel.

A static blog build on top of Notion and NextJS, deployed on Vercel.

Jun 25, 2022
Next.js ReCaptcha V3 - Straightforward solution for using ReCaptcha in your Next.js application

⭐ Next.js ReCaptcha V3 Straightforward solution for using ReCaptcha in your Next.js application. ??️ Tiny and Tree-Shakable ?? Written in TypeScript ?

Jun 18, 2022
[ARCHIVED] experimenting React + GraphQL + Next.js web app on the theme of mindfulness

Relate Relate brings together mindfulness communities, teachers and individuals. Read the article on Medium Made with ❤︎ by Sébastien Dubois Deprecati

May 19, 2022
200 lines realtime todos app powered by next.js, preact, jet, redux and now
200 lines realtime todos app powered by next.js, preact, jet, redux and now

next-todos About 200 lines isomorphic todos app powered by next.js, redux and Jet realtime. The todos are synced between browsers. The canonical TodoA

Apr 24, 2022
A sample Next.js app for showing off it's capabilities
A sample Next.js app for showing off it's capabilities

NextGram Sample next app that takes advantage of the routing capabilities. In particular, notice that the photo route can be attached to two distinct

Apr 10, 2022
:pencil: JsonPlaceholder sample app made with Next.js
:pencil: JsonPlaceholder sample app made with Next.js

What? Next JPH is an example app made with JsonPlaceholder api, using Next.js, styled-components, flow and jest. "JPH" is an acronym to JsonPlaceholde

Dec 22, 2021
A Quine of Next.js app

This is a Next.js project bootstrapped with create-next-app.

Jul 10, 2021
Next.JS App to convert currencies!
Next.JS App to convert currencies!

Next.JS App to convert currencies!

Nov 30, 2021
Example Next.js app to upload photos to an S3 bucket.

Example Next.js app to upload photos to an S3 bucket.

Jun 15, 2022
Todo list app made with next js, redux and react-beautiful-dnd
Todo list app made with next js, redux and react-beautiful-dnd

Nextodo Todo list app made with next js, redux and react-beautiful-dnd [ Live Demo ] Source code for the demo page can be found on the nextodo repo Co

Jun 12, 2022