javascript - Το NextJs <Link> δεν επανεκτελεί σενάρια

Όταν χρησιμοποιώ το <Link> tag στο NextJs για να πλοηγηθώ μεταξύ σελίδων, δεν επανεκτελούνται τα script μου μετά την αλλαγή σελίδων. Εκτελούνται μόνο μετά την πρώτη φόρτωση της σελίδας ή όταν πατάω ανανέωση. Όταν χρησιμοποιώ απλά <a> tags, λειτουργεί κανονικά επειδή η σελίδα φορτώνει ξανά μετά από κάθε πλοήγηση. Από ό,τι μπορώ να καταλάβω, αυτό συμβαίνει επειδή το <Link> tag κάνει την εφαρμογή Single-Page και δεν ανανεώνει τη σελίδα κατά την πλοήγηση μεταξύ σελίδων.

Θα εκτιμούσα ιδιαίτερα κάποιον τρόπο για να επανεκτελεί τα σενάρια κατά την πλοήγηση μεταξύ σελίδων ή να ανανεώνει τη σελίδα χωρίς να χρησιμοποιεί απλώς απλές ετικέτες <a> και να χάνει τη λειτουργικότητα της Εφαρμογής Μίας Σελίδας.

Αυτός ο κώδικας δεν ανανεώνει τη σελίδα

 <Link href="/page1">
   <a>Page 1</a>
 </Link>
 <Link href="/page2">
   <a>Page 2 </a>
 </Link>

Αυτός ο κώδικας ανανεώνει τη σελίδα

 <a href="/page1">Page 1</a>
 <a href="/page2">Page 2 </a>

Φορτώνω όλα μου τα σενάρια χρησιμοποιώντας ένα στοιχείο σεναρίων

export default const MyScripts = () => {
    
    return (
        <Script
            strategy="afterInteractive"
            type="module"
            src="/scripts/myScript.js"
            onReady={() => {
                console.log("Ready")
            }}
        /> 
    )
}

Ένα πράγμα που έχω παρατηρήσει είναι ότι η παραπάνω συνάρτηση onReady εκτελείται κάθε φορά που αλλάζω σελίδες. Ίσως κάποιος να ξέρει πώς να τρέξει το myScript.js από το onReady.

Απάντηση #1

Χρησιμοποιούσα αυτό για να το λύσω. Επαναλαμβάνει ό,τι θέλεις να επαναληφθεί κάθε φορά που αλλάζει η διεύθυνση URL.

function name(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
       // YOUR CUSTOM HOOK / FUNCTION
       console.log('I am called from pushStateHook');
       return pushState.apply(history, arguments);
    };
})
name(history)

Η υλοποίηση μου στο myScript.js

function myFunctions(){
    //my code
}

function urlChange(history){
    let pushState = history.pushState;
    history.pushState = function(state) {
        myFunctions();//I insert my code here
        return pushState.apply(history, arguments);
    };
}
urlChange(history);

Επίσης, είμαι αρκετά σίγουρος ότι history.pushState=function(state){} είναι αυτό που εκτελείται κάθε φορά που αλλάζει η διεύθυνση URL και όχι η συνάρτηση urlChange().

Απάντηση #2

Προσοχή: Το κόλπο της χρήσης του history.pushState δεν θα λειτουργεί αξιόπιστα, ειδικά όταν χρειάζεται να ανακτηθούν στοιχεία του DOM χρησιμοποιώντας document.querySelector*. Πάντως, είναι επίσης καλύτερο να αποφεύγετε τα κόλπα αν μπορείτε.

Ο προτεινόμενος τρόπος για το Next.js είναι να χρησιμοποιείτε το στοιχείο Script με το ενσωματωμένο σενάριο.

Απλά μετακινήστε τον κώδικα Javascript από το script tag σας σε ένα Script component. Αφαιρέστε το HTML script tag και οποιοδήποτε αρχείο script καθώς δεν τα χρειάζεστε πλέον.

import Script from 'next/script';

// Inside your exported component:
<Script id="myScript">
  // Paste the contents of /scripts/myScript.js here (and remove that file)
</Script>

Ένας άλλος καθαρός τρόπος να το κάνετε αυτό είναι να χρησιμοποιήσετε το React hook useEffect. Σε components βασισμένα σε κλάσεις, μπορείτε να χρησιμοποιήσετε το componentDidMount.

Αυτή η ιδέα προτάθηκε εδώ: σχόλιο του samplep182 στο: Normal scripts "" δεν λειτουργεί μετά την πλοήγηση στη σελίδα - Θέμα #4477 - vercel/next.js

Απλά μετακινήστε τον κώδικα Javascript από το script tag σας σε ένα μπλοκ useEffect. Αφαιρέστε το script tag και οποιοδήποτε αρχείο script καθώς δεν τα χρειάζεστε πλέον.

import { useEffect } from 'react';

// Inside your exported component:
useEffect(() => {
  // Paste the contents of /scripts/myScript.js here (and remove that file)
}, []);

Σημειώσεις:

Συνιστάται να υπάρχει ένας κενός πίνακας [] ως λίστα εξαρτήσεων, για να εκτελείται αυτό μόνο κατά τη φόρτωση της σελίδας.
Για εξωτερικά σενάρια, παρακαλώ χρησιμοποιήστε το στοιχείο Script με το χαρακτηριστικό src.