Component hydration with MDX in Next.js and Nx

• Next.js

  2,037 120,313 10.0 JavaScript

  The React Framework

  

// https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote import dynamic from 'next/dynamic' import Test from '../components/test' const SomeHeavyComponent = dynamic(() => import('SomeHeavyComponent')) const defaultComponents = { Test } export function SomePage({ mdxSource, componentNames }) { const components = { ...defaultComponents, SomeHeavyComponent: componentNames.includes('SomeHeavyComponent') ? SomeHeavyComponent : null, } return }

• mdx

  99 16,788 8.7 JavaScript

  Markdown for the component era

  

If we want to implement something similar with Next.js, the closest we’d go with is probably MDX.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Jekyll

  253 48,265 8.7 Ruby

  :globe_with_meridians: Jekyll is a blog-aware static site generator in Ruby

  

Markdown already gives a lot of flexibility in that you can use both, the Markdown syntax as well as plain HTML for links or embedded content. Many of the common static site generators such as Jekyll and Hugo (just to name a few), provide so-called "includes". These are basically snippets or macros that get executed during the static site generation and usually produce a piece of HTML that gets embedded into the existing markdown rendered content. Take for instance the following Hugo snippet which allows to embed an Egghead.io video into a page.

• Hugo

  548 72,338 9.8 Go

  The world’s fastest framework for building websites.

  

Markdown already gives a lot of flexibility in that you can use both, the Markdown syntax as well as plain HTML for links or embedded content. Many of the common static site generators such as Jekyll and Hugo (just to name a few), provide so-called "includes". These are basically snippets or macros that get executed during the static site generation and usually produce a piece of HTML that gets embedded into the existing markdown rendered content. Take for instance the following Hugo snippet which allows to embed an Egghead.io video into a page.

• egghead-next

  61 1,381 9.4 TypeScript

  The frontend for egghead.io.

  

Markdown already gives a lot of flexibility in that you can use both, the Markdown syntax as well as plain HTML for links or embedded content. Many of the common static site generators such as Jekyll and Hugo (just to name a few), provide so-called "includes". These are basically snippets or macros that get executed during the static site generation and usually produce a piece of HTML that gets embedded into the existing markdown rendered content. Take for instance the following Hugo snippet which allows to embed an Egghead.io video into a page.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project