{"id":19977932,"url":"https://github.com/devbyray/devbyrayray-nextjs-blog","last_synced_at":"2026-05-09T20:21:45.641Z","repository":{"id":53807097,"uuid":"322824422","full_name":"devbyray/devbyrayray-nextjs-blog","owner":"devbyray","description":null,"archived":false,"fork":false,"pushed_at":"2022-09-21T09:17:27.000Z","size":4866,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-12T10:11:52.096Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devbyray.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-19T10:48:04.000Z","updated_at":"2023-03-08T23:52:36.000Z","dependencies_parsed_at":"2023-01-18T17:47:51.954Z","dependency_job_id":null,"html_url":"https://github.com/devbyray/devbyrayray-nextjs-blog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbyray%2Fdevbyrayray-nextjs-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbyray%2Fdevbyrayray-nextjs-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbyray%2Fdevbyrayray-nextjs-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbyray%2Fdevbyrayray-nextjs-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devbyray","download_url":"https://codeload.github.com/devbyray/devbyrayray-nextjs-blog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241411542,"owners_count":19958753,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T03:29:48.753Z","updated_at":"2026-05-09T20:21:45.609Z","avatar_url":"https://github.com/devbyray.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MDX Remote Example\n\nThis example shows how a simple blog might be built using the [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) library, which allows mdx content to be loaded via `getStaticProps` or `getServerSideProps`. The mdx content is loaded from a local folder, but it could be loaded from a database or anywhere else.\n\nThe example also showcases [next-remote-watch](https://github.com/hashicorp/next-remote-watch), a library that allows next.js to watch files outside the `pages` folder that are not explicitly imported, which enables the mdx content here to trigger a live reload on change.\n\nSince `next-remote-watch` uses undocumented Next.js APIs, it doesn't replace the default `dev` script for this example. To use it, run `npm run dev:watch` or `yarn dev:watch`.\n\n## Deploy your own\n\nDeploy the example using [Vercel](https://vercel.com):\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote)\n\n## How to use\n\nExecute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:\n\n```bash\nnpx create-next-app --example with-mdx-remote with-mdx-remote-app\n# or\nyarn create next-app --example with-mdx-remote with-mdx-remote-app\n```\n\nDeploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js\u0026utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).\n\n## Notes\n\n### Conditional custom components\n\nWhen using `next-mdx-remote`, you can pass custom components to the MDX renderer. However, some pages/MDX files might use components that are used infrequently, or only on a single page. To avoid loading those components on every MDX page, you can use `next/dynamic` to conditionally load them.\n\nFor example, here's how you can change `getStaticProps` to conditionally add certain components:\n\n```js\nimport dynamic from 'next/dynamic'\n\n// ...\n\nexport async function getStaticProps() {\n  const { content, data } = matter(source)\n\n  const components = {\n    ...defaultComponents,\n    SomeHeavyComponent: /\u003cSomeHeavyComponent/.test(content)\n      ? dynamic(() =\u003e import('SomeHeavyComponent'))\n      : null,\n  }\n\n  const mdxSource = await renderToString(content, { components })\n}\n```\n\nIf you do this, you'll also need to check in the page render function which components need to be dynamically loaded. You can pass a list of component names via `getStaticProps` to accomplish this.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevbyray%2Fdevbyrayray-nextjs-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevbyray%2Fdevbyrayray-nextjs-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevbyray%2Fdevbyrayray-nextjs-blog/lists"}