Usage with NextJS

How to use the library with NextJS

Create a new Next.js project

Run the following command:

bash

npx create-next-app@latest

Select the default options:

bash

√ What is your project named? ... nextjs-project
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes (👈 optional)
√ Would you like to use `src/` directory? ... Yes (👈 optional)
#...

Add the library

Run the following command:

bash

Add the component to the app.tsx file:

💡 JsonViewer needs use client directive.

tsx

"use client";
 
import { JsonViewer } from "@franmella/json-viewer";
 
export default function App() {
  return (
    <div>
      <JsonViewer />
    </div>
  );
}

Pass the JSON data to the component:

tsx

"use client";
 
import { JsonViewer } from "@franmella/json-viewer";
 
export default function App() {
  const json = {
    name: "John Doe",
    age: 30,
    email: "test@test.com",
    address: {
      street: "123 Main St",
      city: "Springfield",
      state: "IL",
      zip: "62701",
    },
  };
 
  return (
    <div>
      <JsonViewer data={json} />
    </div>
  );
}