So I am new to next.js and I want to integrate an external javascript src file into my next.js app. Something like this

<script type="text/javascript">
src="//static.powerreviews.com/t/v1/tracker.js"></script>

<script type="text/javascript">
   (function(){try{

   var tracker = POWERREVIEWS.tracker.createTracker({
    merchantGroupId: 'MERCHANT_GROUP_ID'});

    var orderFeed = {
        merchantGroupId: 'MERCHANT_GROUP_ID',
        merchantId: 'MERCHANT_ID',
        locale: 'LOCALE',
        merchantUserId: 'INTERNAL CUSTOMER_ID',
        marketingOptIn: true,
        userEmail: 'CUSTOMER_EMAIL ADDRESS',
        userFirstName: 'CUSTOMER FIRST_NAME',
        userLastName: 'CUSTOMER LAST_NAME',
        orderId: 'ORDER_ID',
        orderItems: [{
            page_id: 'PAGE_ID_1',
            product_name: 'PRODUCT_NAME_1',
            quantity: QUANTITY,
            unit_price: PRICE
        }, {
            page_id: 'PAGE_ID_2',
            page_id_variant: 'VARIANT_ID_2',
            product_name: 'PRODUCT NAME 2',
            quantity: QUANTITY,
            unit_price: PRICE
        }]
    }
    tracker.trackCheckout(orderFeed);

}catch(e){window.console && window.console.log(e)}}());
</script>

So far I have added the Script tag into my app.tsx as such

<>
 <Script
    src="//static.powerreviews.com/t/v1/tracker.js"
    strategy="afterInteractive"
   />
 <div id="app-root">
    ......
 </div>
</>

So the question is, how can I call the function in a separate component?