#How to return a js raw file on the Nextjs 13 app

1 messages · Page 1 of 1 (latest)

cedar jungle
#

I am using a nextjs 13 (app folder) and need to create in my route a embedablle script that will serve our customers.
So i need that widget.example.com/[instanceId]/script.js actually render a javascript raw file. Can you help?

pallid stratusBOT
#

Hi @cedar jungle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, you can use Next.js's routing and script optimization features to achieve this.

Firstly, you need to define a dynamic route to handle the instanceId parameter. In Next.js, dynamic routes are defined using file names enclosed in square brackets. For your case, you would create a file named [instanceId].tsx (or .js or .jsx) inside the script.js folder in your app directory. This will map to the widget.example.com/[instanceId]/script.js URL pattern.

Here's a basic example of how you might structure your dynamic route file:

// app/script.js/[instanceId].tsx

export default function InstanceScript({ instanceId }) {
  // Your script logic here, using the instanceId as needed
}

However, serving raw JavaScript files directly is not a typical use case for Next.js, which is primarily designed for serving React components. If you need to serve a raw JavaScript file, you might need to use a custom server setup or consider other methods of distributing your script.

For loading third-party scripts, Next.js provides the next/script module. You can use this to include scripts in your pages or layouts, and Next.js will ensure the script only loads once, even if a user navigates between multiple pages. However, this is typically used for including scripts in the HTML of your pages, rather than serving raw JavaScript files.

Here's an example of how you might use next/script:

import Script from 'next/script'

export default function MyPage() {
  return (
    <>
      <Script src="<https://example.com/script.js"> />
      // Your page content here
    </>
  )
}
#

Please note that these are general guidelines based on the information provided in the extracts. For more specific advice tailored to your application, you may need to refer to the Next.js documentation (https://nextjs.org/docs) or seek advice from the Next.js community.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@cedar jungle kapa.ai is still learning and improving, please let us know how it did by reacting below