Nextra with yaml support?

[prensoni0143]

Hi Team, does Nextra supports YAML file for page rendering?

[caffeine-addictt]

Can you provide more context?

Not too sure about generating pages at runtime, but if you can try adding a build step that generates the pages from yaml following Nextra's file structure.

[caffeine-addictt]

Looks like you'll have to build and npm start every time you change something locally. 🥲

[prensoni0143]

Sorry, please ignore my above comment, it was meant for another issue I reported.

To describe the ask above, we have yaml files from which we need to generate static page content. I found the way by using yaml-parsing with API hosting to convert it to json, however I would prefer directly to be able to do it. below is the code of what I am trying:

`import axios from "axios";
import { useEffect, useState } from "react";

export default function Controls({ file, initialControls }) {
const [controls, setControls] = useState(initialControls || []);

useEffect(() => {
if (!initialControls) {
fetchData();
}
}, []);

async function fetchData() {
try {
const response = await axios.get(
https://freecodez-api.onrender.com/api/yaml-parsing?file=./data/${file}
);
if (response?.data?.controls) {
setControls(response.data.controls);
}
} catch (error) {
console.error("Error fetching data:", error);
}
}

return (

{controls.map((control) => (

{control.description}

Control Name: {control.name}

Control Severity: {control.score}

Control Query:{" "} {control.query.replace("'", "'").replace(""", '"')}

Enabled status: {control.enabled}

Control Category: {control.category}

`

[prensoni0143]

and the file where it should generate has the follow:

`import Controls from "../../../components/Controls.mdx";

<Controls file={"alicloud-controls.yaml"} />`

[prensoni0143]

My ask here if I can use directly yaml file to parsh the content without converting it to json, it would be really helpful.

[caffeine-addictt]

I don't think rendering directly from yaml is supported in Nextra/NextJS. This is more so of a hack, but something like this could work. NextJS Docs

import * as React from 'react'
import type { GetServerSidePropsContext } from 'next'

interface ExportedContent { content: any; orEvenAsAPage: React.ReactElement | react.ReactElement[] }

export const getServerSideProps = ({ res }: GetServerSidePropsContext): Promise<{ props: ExportedContent }> => {
    // Code here runs on the server
    // You can import the file and interpret it to JSX/Javascript

    return { props: { content: interpretedYamlStuff, orEvenAsAPage: page } }
}


const MyPage = ({ props: { content, Page } }: { props: ExportedContent }) => {
    // Client code here
    return <>
        {content}
        <Page />
    </>
}