<RemoteContent />

[kaitoukid-1412]

Hi,

There is currently no document about this issue

https://nextra.site/docs/guide/advanced/remote

• src\pages\pokemon\[name].mdx

import { RemoteContent } from "nextra/data";
import { buildDynamicMDX, buildDynamicMeta } from "nextra/remote";
import { useFetch } from "@/hooks";

export async function getPokémons() {
  const { results: data } = await useFetch({
    url: process.env.NEXT_PUBLIC_API_POKEMON,
  });
  return { data };
}

export async function getStaticPaths() {
  const { data } = await getPokémons();
  return {
    paths: data.map(({ name }) => ({ params: { name } })),
    fallback: false,
  };
}

export async function getStaticProps({ params: { name: __name__ } }) {
  const { data } = await getPokémons();
  const { url } = data.find(({ name }) => name === __name__);
  const { name, ...rest } = await useFetch({ url });
  const content = `---
title: ${name}
---
# ${name}
\`\`\`
${JSON.stringify({ name, ...rest }, null, 2)}
\`\`\`
`;
  return {
    props: {
      ...(await buildDynamicMDX(content)),
      ...(await buildDynamicMeta()),
    },
  };
}

<RemoteContent />

• everything works, but no sidebar

• no breadcrumb

• also can not search

[IlirEdis]

I'm using similar implementation. Any luck to have search working with this?

[LunaticMuch]

@shenlong616 and @IlirEdis have you had a look at GraphQL Yoga website? This section is generated with <RemoteContent> if you look at the code.

[kaitoukid-1412]

@LunaticMuch I seem to be missing the _meta.js file, but after creating some other problems appear 🥲

• Error: Only URLs with a scheme in: file and data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
• and [nextra] Error loading src\pages\pokemon\_meta.js

I'll find out later, thank you

[LunaticMuch]

@shenlong616 do you think I can see your repository? I really interested as I need to do something similar

[kaitoukid-1412]

You can download the source code here

• Download link

https://www.mediafire.com/file/msyyc2ou9we49m4/test-0.zip/file

• Commands

npm i
npm run dev

Guide me if you know how to fix it, @LunaticMuch

[LunaticMuch]

@shenlong616 got it working ... put this in your _meta.js

const { createCatchAllMeta } = require('nextra/catch-all')
import { usePokémonList } from "@/hooks";

module.exports = async () => {
  const { data } = await usePokémonList();
  // FIXME: This is horrible but does the job
  const pageList = data.map((item) => {return item.name + '.mdx'})
  return createCatchAllMeta(pageList)
};

Look the result

One thing I could not reproduce is the error you showed above - I am on a Mac and there's something Windows specific in it. Also, check the node version... I am using v18.16.1. If you wish, I can publish your code on a repo (I see it has nothing private) so it remains as a reference

[IlirEdis]

@shenlong616 and @IlirEdis have you had a look at GraphQL Yoga website? This section is generated with <RemoteContent> if you look at the code.

@LunaticMuch yes i've seen this and as i noticed they are using Algolia as a third party service for the search functionality. Is search working with your use case?

[LunaticMuch]

good point @IlirEdis I have noticed it does not work, although it should. I try to review it tomorrow and create a fresh case.

[IlirEdis]

I already asked a question here https://github.com/shuding/nextra/issues/1952#issuecomment-1627759509 but it seems it will not work with remote data, maybe until a future release. I will be forced to move away from Nextra because of this.

[markcmurphy]

Look into Typesense, an open-source Algolia alternative. They have a fork of the Algolia DocSearch crawler you can use to create an index once the site is live rather than on build.

On Sun, Jul 16, 2023, 4:25 PM Ilir Bajrami @.***> wrote:

I already asked a question here #1952 (comment) https://github.com/shuding/nextra/issues/1952#issuecomment-1627759509 but it seems it will not work with remote data, maybe until a future release. I will be forced to move away from Nextra because of this.

— Reply to this email directly, view it on GitHub https://github.com/shuding/nextra/issues/1980#issuecomment-1637193481, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHBIFX6EVVNI7VMX733K6G3XQRL3DANCNFSM6AAAAAAZLRKCYQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[kaitoukid-1412]

@shenlong616 got it working ... put this in your _meta.js

const { createCatchAllMeta } = require('nextra/catch-all')
import { usePokémonList } from "@/hooks";

module.exports = async () => {
  const { data } = await usePokémonList();
  // FIXME: This is horrible but does the job
  const pageList = data.map((item) => {return item.name + '.mdx'})
  return createCatchAllMeta(pageList)
};

Look the result

One thing I could not reproduce is the error you showed above - I am on a Mac and there's something Windows specific in it. Also, check the node version... I am using v18.16.1. If you wish, I can publish your code on a repo (I see it has nothing private) so it remains as a reference

I still get the same error, maybe it's Windows OS 🥲

Thank you for your support, @LunaticMuch

[LunaticMuch]

I already asked a question here #1952 (comment) but it seems it will not work with remote data, maybe until a future release. I will be forced to move away from Nextra because of this.

@IlirEdis where did you land leaving Nextra?

According to your comment you also found what is not working correctly. This makes sense as I see indexed [name] as a file.

[IlirEdis]

@IlirEdis where did you land leaving Nextra?

@LunaticMuch Didnt choose yet. I will need to find a solution which has its own CMS since my coworkers are not familiar with git and all that stuff which needs to deploy the changes using mdx. Thats why i came up with a solution to get the content remotely (using Strapi as CMS) but at the end, when i thought it worked, search was the thing that ruined the whole thing!

[LunaticMuch]

@IlirEdis take it with very low confidence, but it does not seem a massive problem to fix. The issue is that the metadata for search is generated only repeating the dynamic route name instead of the name the page is supposed to have.

[IlirEdis]

@LunaticMuch maybe im exaggerating it but at the moment i dont have any clue how to fix it, lol. Here's a codesandbox to see my implementation.

Btw here in this sandbox i implemented this: https://docs.oramasearch.com/plugins/plugin-nextra but it behaves exactly the same as the default Nextra search which is implemented using this library: https://github.com/nextapps-de/flexsearch

If it opens the first default home Nextjs page, navigate to /docs/home to see the docs page.

[LunaticMuch]

@IlirEdis I am cautious in saying easy :) but what I understand is that the just generate a wrong index file.

[LunaticMuch]

@IlirEdis I did some research. The index is populated as a webpack plugin. It backs file on disk, so dynamic routes do not really work. A workaround, for the build, would be just to dump an additional index file and then to combine both json. I tried it, and it work. As a strategy, some changes would be required. I have no real idea about the webpack plugin. I would have built the index file at runtime outside webpack, but I am sure there's a reason for that. I know some solutions with Next.JS actually build indexes on the API route and then back the API route for the search.

[ahrbil]

Hi @LunaticMuch could you please elaborate on "solutions" to build indexes at runtime? I'm trying to build a search feature using Orama and content from Notion.

[AowerDmax]

@kaitoukid-1412 @LunaticMuch I'm working on remote content related content, I'm interested in your example, I found that the download address of the above example is invalid, can you give me an example? Thank you so much

[kaitoukid-1412]

@AowerDmax

npm i && npm run dev
https://www.file.io/o5iH/download/DLqFhNcQU4OW