как я могу вместо верстки отобразить json как будто это апи

Question

import { GetServerSideProps } from "next"
import { FC } from "react"

const App: FC = (props: any) => {
 
  return (props)
}

export default App


export const getServerSideProps: GetServerSideProps = async (context) => {
  const props = await {
    test: 'Test'
  }
  return await {props}
}

можно ли вывести вместо HTML джейсон обект Content-Type application/json ? и можно ли кастомизировать рендер компонента ?

Answer 1

Отобразить JSON в html можно очень простым нативным способом. Для этого нужно просто обернуть результат выполнения JSON.stringify() в тег <pre> и получится неплохой результат:

import data from "./data.json";

export default function App() {
  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Ссылка на песочницу react

UPD:

Если нативное самописное решение не устраивает и хочется уже готовый пакет использовать, то можно воспользоваться библиотечкой react-json-view

import ReactJson from "react-json-view";
import data from "./data.json";

export default function App() {
  return (
    <div className="App">
      <ReactJson src={data} />
    </div>
  );
}

Ссылка на песочницу с react-json-view

БЛОГ НА HUSL

как я могу вместо верстки отобразить json как будто это апи

Ответы (1 шт):