Next js data extractor - v0 by Vercel

I would like to create a small tool with the following specifications:

Purpose: The tool should extract Next.js data or RSC data from a given HTML code blob pasted into a textarea.
Functionality: The tool should extract content from the following tags in the HTML code:

<script id="__NEXT_DATA__" type="application/json">
<script id="__NEXT_DATA__">
Any script tag that starts with "self.__next_f.push("

Reporting: The tool should report the total percentage of the extracted content's size relative to the whole HTML document.
Copy Button: The tool should have a button to copy the extracted Next.js data or RSC data.
Data Combination: For App Router content, the tool should combine all extracted data into one JSON object. For Pages Router, it should only return the single JSON object without combining.

Show full message

260d ago

I'll create a small tool that meets your specifications for extracting Next.js data or RSC data from HTML code. This tool will be implemented as a React component with the functionality you've described. Let's break it down and implement it step by step.

Let's create the React component for this tool:

This tool meets all the specifications you provided:

Purpose: It extracts Next.js data or RSC data from HTML code pasted into a textarea.
Functionality: It extracts content from:
- <script id="__NEXT_DATA__" type="application/json">
- <script id="__NEXT_DATA__">
- Any script tag that starts with "self.__next_f.push("
Reporting: It calculates and displays the percentage of the extracted content's size relative to the whole HTML document.
Copy Button: There's a button to copy the extracted Next.js data or RSC data to the clipboard.
Data Combination: For App Router content (detected by the presence of self.__next_f.push(), it combines all extracted data into one JSON object. For Pages Router, it returns the single JSON object without combining.

To use this tool:

Paste the HTML code into the textarea.
Click the "Extract Data" button.
The extracted data will be displayed in the second textarea, along with the percentage of the extracted content's size.
Use the "Copy Extracted Data" button to copy the extracted data to your clipboard.

This implementation uses React hooks for state management and the DOMParser API to parse the HTML input. It also uses the Clipboard API for the copy functionality. The tool is responsive and should work well on different screen sizes.

260d ago

The code returns the following error:

Uncaught error: Uncaught SyntaxError: Unexpected non-whitespace character after JSON at position 10 (line 2 column 10)

  at (/components/NextjsDataExtractor)
  at (/components/NextjsDataExtractor)

Revise the code to address the error.

Just make for the App Router JSON ("self.__next_f.push(") you create this by adding or pushing this into the object same as it's pushed in code. You can call it "__next_f" that will be a list of those objects.

Do not modify logic for Pages Router.

Show full message

2 / 2

260d ago

I understand the error and the requested changes. Let's revise the code to address the issue and implement the changes for the App Router JSON handling.

These changes address the error and implement the requested modifications:

The JSON parsing error is now handled with a try-catch block, which will prevent the uncaught SyntaxError.
For App Router content (scripts starting with "self.__next_f.push("), we now create an object with an "__next_f" key. This key contains a list of the parsed objects from these scripts.
The logic for Pages Router content remains unchanged. If a script with id="NEXT_DATA" is found, its content will be extracted as before.
The regular expression for matching the content inside "self.__next_f.push(" has been updated to more accurately capture the JSON content.

These changes should resolve the error you encountered and implement the requested modifications for App Router JSON handling. The extracted data for App Router content will now be in the format:

{
  "__next_f": [
    [...],
    [...],
    ...
  ]
}

Where each item in the "__next_f" array corresponds to the content of one "self.__next_f.push([...])" script.

The Pages Router extraction remains the same, returning the single JSON object from the "NEXT_DATA" script when present.

260d ago

ok here is the example input for App Router extraction and building this object:

<script>
  self.__next_f.push([
    1,
    'b:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Esthetic Dental Lab | High-Quality Dental Laboratory London"}],["$","meta","3",{"name":"description","content":"Professional dental laboratory in London \u0026 Surrey offering high-quality dental works, custom dentures, and fast turnaround times. Serving West London and surrounding areas."}],["$","meta","4",{"name":"author","content":"Esthetic Dental Lab"}],["$","meta","5",{"name":"keywords","content":"Dental Lab, High-quality dental lab Surrey, Dental Laboratory West London, Private dental lab London, Custom dental lab London, Local dental lab London, Dental laboratory Surrey, Fast dental laboratory London, Reliable dental lab, Full dentures"}],["$","meta","6",{"name":"creator","content":"Esthetic Dental Lab"}],["$","meta","7",{"name":"publisher","content":"Esthetic Dental Lab"}],["$","meta","8",{"name":"robots","content":"index, follow"}],["$","meta","9",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","10",{"property":"og:title","content":"Esthetic Dental Lab | High-Quality Dental Laboratory London"}],["$","meta","11",{"property":"og:description","content":"Professional dental laboratory in London \u0026 Surrey offering high-quality dental works, custom dentures, and fast turnaround times. Serving West London and surrounding areas."}],["$","meta","12",{"property":"og:site_name","content":"Esthetic Dental Lab"}],["$","meta","13",{"property":"og:locale","content":"en_GB"}],["$","meta","14",{"property":"og:image:alt","content":"Esthetic Dental Lab"}],["$","meta","15",{"property":"og:image:type","content":"image/png"}],["$","meta","16",{"property":"og:image","content":"https://www.estheticlab.co.uk/opengraph-image?fcab4bfd2b115d61"}],["$","meta","17",{"property":"og:image:width","content":"1200"}],["$","meta","18",{"property":"og:image:height","content":"630"}],["$","meta","19",{"property":"og:type","content":"website"}],["$","meta","20",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","21",{"name":"twitter:title","content":"Esthetic Dental Lab | High-Quality Dental Laboratory London"}],["$","meta","22",{"name":"twitter:description","content":"Professional dental laboratory in London \u0026 Surrey offering high-quality dental works, custom dentures, and fast turnaround times. Serving West London and surrounding areas."}],["$","meta","23",{"name":"twitter:image:alt","content":"Esthetic Dental Lab"}],["$","meta","24",{"name":"twitter:image:type","content":"image/png"}],["$","meta","25",{"name":"twitter:image","content":"https://www.estheticlab.co.uk/twitter-image?fcab4bfd2b115d61"}],["$","meta","26",{"name":"twitter:image:width","content":"1200"}],["$","meta","27",{"name":"twitter:image:height","content":"630"}]]\n',
  ]);
</script>
<script>
  self.__next_f.push([1, "3:null\n"]);
</script>

adjust only App Router code, leave Pages router code detection the same

Show full message

260d ago

components

NextjsDataExtractor.tsx

I would like to create a small tool with the following specifications:

Purpose: The tool should extract Next.js data or RSC data from a given HTML code blob pasted into a textarea.
Functionality: The tool should extract content from the following tags in the HTML code:

<script id="__NEXT_DATA__" type="application/json">
<script id="__NEXT_DATA__">
Any script tag that starts with "self.__next_f.push("

Reporting: The tool should report the total percentage of the extracted content's size relative to the whole HTML document.
Copy Button: The tool should have a button to copy the extracted Next.js data or RSC data.
Data Combination: For App Router content, the tool should combine all extracted data into one JSON object. For Pages Router, it should only return the single JSON object without combining.

Show full message

260d ago

Let's create the React component for this tool:

This tool meets all the specifications you provided:

Purpose: It extracts Next.js data or RSC data from HTML code pasted into a textarea.
Functionality: It extracts content from:
- <script id="__NEXT_DATA__" type="application/json">
- <script id="__NEXT_DATA__">
- Any script tag that starts with "self.__next_f.push("
Reporting: It calculates and displays the percentage of the extracted content's size relative to the whole HTML document.
Copy Button: There's a button to copy the extracted Next.js data or RSC data to the clipboard.
Data Combination: For App Router content (detected by the presence of self.__next_f.push(), it combines all extracted data into one JSON object. For Pages Router, it returns the single JSON object without combining.

To use this tool:

Paste the HTML code into the textarea.
Click the "Extract Data" button.
The extracted data will be displayed in the second textarea, along with the percentage of the extracted content's size.
Use the "Copy Extracted Data" button to copy the extracted data to your clipboard.

260d ago

The code returns the following error:

Uncaught error: Uncaught SyntaxError: Unexpected non-whitespace character after JSON at position 10 (line 2 column 10)

  at (/components/NextjsDataExtractor)
  at (/components/NextjsDataExtractor)

Revise the code to address the error.

Do not modify logic for Pages Router.

Show full message

2 / 2

260d ago

I understand the error and the requested changes. Let's revise the code to address the issue and implement the changes for the App Router JSON handling.

These changes address the error and implement the requested modifications:

The JSON parsing error is now handled with a try-catch block, which will prevent the uncaught SyntaxError.
For App Router content (scripts starting with "self.__next_f.push("), we now create an object with an "__next_f" key. This key contains a list of the parsed objects from these scripts.
The logic for Pages Router content remains unchanged. If a script with id="NEXT_DATA" is found, its content will be extracted as before.
The regular expression for matching the content inside "self.__next_f.push(" has been updated to more accurately capture the JSON content.

These changes should resolve the error you encountered and implement the requested modifications for App Router JSON handling. The extracted data for App Router content will now be in the format:

{
  "__next_f": [
    [...],
    [...],
    ...
  ]
}

Where each item in the "__next_f" array corresponds to the content of one "self.__next_f.push([...])" script.

The Pages Router extraction remains the same, returning the single JSON object from the "NEXT_DATA" script when present.

260d ago

ok here is the example input for App Router extraction and building this object:

<script>
  self.__next_f.push([
    1,
    'b:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Esthetic Dental Lab | High-Quality Dental Laboratory London"}],["$","meta","3",{"name":"description","content":"Professional dental laboratory in London \u0026 Surrey offering high-quality dental works, custom dentures, and fast turnaround times. Serving West London and surrounding areas."}],["$","meta","4",{"name":"author","content":"Esthetic Dental Lab"}],["$","meta","5",{"name":"keywords","content":"Dental Lab, High-quality dental lab Surrey, Dental Laboratory West London, Private dental lab London, Custom dental lab London, Local dental lab London, Dental laboratory Surrey, Fast dental laboratory London, Reliable dental lab, Full dentures"}],["$","meta","6",{"name":"creator","content":"Esthetic Dental Lab"}],["$","meta","7",{"name":"publisher","content":"Esthetic Dental Lab"}],["$","meta","8",{"name":"robots","content":"index, follow"}],["$","meta","9",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","10",{"property":"og:title","content":"Esthetic Dental Lab | High-Quality Dental Laboratory London"}],["$","meta","11",{"property":"og:description","content":"Professional dental laboratory in London \u0026 Surrey offering high-quality dental works, custom dentures, and fast turnaround times. Serving West London and surrounding areas."}],["$","meta","12",{"property":"og:site_name","content":"Esthetic Dental Lab"}],["$","meta","13",{"property":"og:locale","content":"en_GB"}],["$","meta","14",{"property":"og:image:alt","content":"Esthetic Dental Lab"}],["$","meta","15",{"property":"og:image:type","content":"image/png"}],["$","meta","16",{"property":"og:image","content":"https://www.estheticlab.co.uk/opengraph-image?fcab4bfd2b115d61"}],["$","meta","17",{"property":"og:image:width","content":"1200"}],["$","meta","18",{"property":"og:image:height","content":"630"}],["$","meta","19",{"property":"og:type","content":"website"}],["$","meta","20",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","21",{"name":"twitter:title","content":"Esthetic Dental Lab | High-Quality Dental Laboratory London"}],["$","meta","22",{"name":"twitter:description","content":"Professional dental laboratory in London \u0026 Surrey offering high-quality dental works, custom dentures, and fast turnaround times. Serving West London and surrounding areas."}],["$","meta","23",{"name":"twitter:image:alt","content":"Esthetic Dental Lab"}],["$","meta","24",{"name":"twitter:image:type","content":"image/png"}],["$","meta","25",{"name":"twitter:image","content":"https://www.estheticlab.co.uk/twitter-image?fcab4bfd2b115d61"}],["$","meta","26",{"name":"twitter:image:width","content":"1200"}],["$","meta","27",{"name":"twitter:image:height","content":"630"}]]\n',
  ]);
</script>
<script>
  self.__next_f.push([1, "3:null\n"]);
</script>

adjust only App Router code, leave Pages router code detection the same

components

NextjsDataExtractor.tsx