CODEWITHSUNDEEP
javascripthtmlreactjsnext.jsreact-helmet
user3322378
user3322378

Reputation: 35

Render vanilla javascript and html within a Nextjs app

I have a file containing javascript and html similar to below. I am trying to render this within a nextjs app. The code in the file cannot be changed to jsx and the application that will render it is a Next app. I have tried using React Helmet by directly embedding it within the code but nothing gets rendered. Are there any other options?

Script file:

<!DOCTYPE html>
<html>
<head>
    <title>JSON to Table</title>
</head>
<body>
    <h1>JSON Data</h1>
    <table id="dataTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script>
// Sample JSON data
const data = [
    { name: "John Doe", age: 35, city: "New York" },
    { name: "Jane Smith", age: 28, city: "Los Angeles" },
    { name: "Bob Johnson", age: 42, city: "Chicago" },
    { name: "Sarah Lee", age: 31, city: "Miami" }
];

// Get the table body element
const tableBody = document.querySelector('#dataTable tbody');

// Loop through the data and create table rows
data.forEach(item => {
    const row = document.createElement('tr');

    const nameCell = document.createElement('td');
    nameCell.textContent = item.name;
    row.appendChild(nameCell);

    const ageCell = document.createElement('td');
    ageCell.textContent = item.age;
    row.appendChild(ageCell);

    const cityCell = document.createElement('td');
    cityCell.textContent = item.city;
    row.appendChild(cityCell);

    tableBody.appendChild(row);
});
</script>
</body>
</html>

Nextjs code:

"use client"
import {Helmet} from "react-helmet";

const Page = () => {
    return (
        <>
        <div className="w-screen h-screen flex items-start justify-start overflow-hidden">
            <Helmet>
                <title>Nested Title</title>
                <meta name="description" content="Nested component"/>
                <html>
                {`<!DOCTYPE html>
<html>
<head>
    <title>JSON to Table</title>
</head>
<body>
    <h1>JSON Data</h1>
    <table id="dataTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script>
// Sample JSON data
const data = [
    { name: "John Doe", age: 35, city: "New York" },
    { name: "Jane Smith", age: 28, city: "Los Angeles" },
    { name: "Bob Johnson", age: 42, city: "Chicago" },
    { name: "Sarah Lee", age: 31, city: "Miami" }
];

// Get the table body element
const tableBody = document.querySelector('#dataTable tbody');

// Loop through the data and create table rows
data.forEach(item => {
    const row = document.createElement('tr');

    const nameCell = document.createElement('td');
    nameCell.textContent = item.name;
    row.appendChild(nameCell);

    const ageCell = document.createElement('td');
    ageCell.textContent = item.age;
    row.appendChild(ageCell);

    const cityCell = document.createElement('td');
    cityCell.textContent = item.city;
    row.appendChild(cityCell);

    tableBody.appendChild(row);
});
</script>
</body>
</html>`}
                </html>
            </Helmet>
        </div>
        </>
    );
}

export default Page;

Upvotes: 1

Views: 295

Answers (1)

Rod
Rod

Reputation: 419

Assuming that you are using the App Router You could use Script component given by Next.js. Docs here

First, you need to create a component like this:

"use client";

import Script from "next/script";

export default function ScriptComponent() {
  return (
    <>
      <h1>JSON Data</h1>
      <table id="dataTable">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      {/* your script file goes in the public folder */}
      <Script src="/js/your-custom-code.js" />
    </>
  );
}

Then, import this component into your page within Suspense component, like this:

<Suspense fallback={null}>
    <ScriptComponent />
</Suspense>

It is important to note that the script by default will load afterInteractive, you can change that with the strategy property.

Upvotes: 1

Related Questions