Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Το Next.js είναι ένα ισχυρό πλαίσιο για τη δημιουργία εφαρμογών React υψηλής απόδοσης. Ένα από τα χαρακτηριστικά του είναι η δυνατότητα δημιουργίας προσαρμοσμένων διατάξεων για τις σελίδες σας που σας επιτρέπουν να δημιουργήσετε μια συνεπή σχεδίαση που είναι εύκολο να διατηρηθεί και να ενημερώνεται σε όλη την εφαρμογή σας.

Δημιουργία στοιχείου προσαρμοσμένης διάταξης στο Next. JS

Στον φάκελο με το όνομα συστατικά στο έργο σας Next.js, δημιουργήστε Layout.jsx και προσθέστε τον ακόλουθο κώδικα για να δημιουργήσετε το στοιχείο διάταξης.

εισαγωγή Κεφάλι από'επόμενο/κεφάλι'
εισαγωγή Επί κεφαλής από"./Header.jsx"
εισαγωγή Υποσέλιδο από"./Footer.jsx"
συνθ Διάταξη = (παιδιά) => (



Η εφαρμογή μου<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <header></header><br> {children}<br> <br> <<span>/div></span><br>)<br><span>εξαγωγή</span> <span>προεπιλογή</span> Διάταξη<br> < p>Αυτό το στοιχείο εισάγει τα στοιχεία Κεφαλίδα και Υποσέλιδο και <div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6975751975873345" crossorigin="anonymous"></script>
<!-- den1 -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6975751975873345" data-ad-slot="1357082842" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<a href="https://greatfon.com">instagram viewer</a>
</div>
<span>δέχεται παιδιά ως στηρίγματα</span>. Αποδίδει τα <strong>παιδιά</strong> ανάμεσα στα στοιχεία Κεφαλίδα και Υποσέλιδο. Όταν αναδιπλώνετε μια σελίδα με αυτήν τη διάταξη, η κεφαλίδα και το υποσέλιδο θα εμφανίζονται στο επάνω και στο κάτω μέρος.<h2 id="using-the-layout-component"> Χρησιμοποιώντας το Στοιχείο διάταξης </h2>
<p>Για να χρησιμοποιήσετε το στοιχείο διάταξης, εισαγάγετε το σε ένα στοιχείο σελίδας και χρησιμοποιήστε το όπως φαίνεται παρακάτω.</p> <pre> <code><span>εισαγωγή</span> Διάταξη <span>από</span> <span>'../components/Layout'</span><br><span>const</span> Σελίδα = <span><span>()</span> =></span> (<br>  <h1>Αρχική σελίδα<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>εξαγωγή</span> <span> προεπιλεγμένη</span> Σελίδα<br>
</h1></code> </pre>
<p>Θα εφαρμόσει το διάταξη σε αυτή τη σελίδα. Μπορείτε να επαναλάβετε αυτήν τη διαδικασία σε όλες τις σελίδες που θέλετε να εφαρμόσετε τη διάταξη.</p>
<p>Για να χρησιμοποιήσετε τη διάταξη σε όλες τις σελίδες των εφαρμογών ταυτόχρονα, εισάγετε τη διάταξη. το στοιχείο διάταξης στο αρχείο <strong>/page/_app.js</strong> και χρησιμοποιήστε το ως εξής.</p> <pre> <code><span>εισαγωγή</span> Διάταξη <span>από</span> span> <span>"../components/layout"</span>;<br><span><span>λειτουργία</span> <span>MyApp</span>(<span>{ Component, pageProps } span>) </span>{ <br> <span>επιστροφή</span> ( <br>  <br>  <br> <<span>/Διάταξη> </span><br> ) ;<br>}</span></code> </pre>
<p>Τα παραδείγματα που εμφανίζονται μέχρι τώρα χρησιμοποιήστε τους φακέλους Next.js 12 σελίδων. Στο Next.js 13, δημιουργείτε τη διάταξη στο φάκελο της εφαρμογής (από τη στιγμή που γράφτηκε, είναι σε έκδοση beta).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Δημιουργία προσαρμοσμένης διάταξης στο φάκελο εφαρμογής </h2>
<p>Ο φάκελος <span>app στο Next.js 13 </span> απαιτεί να δημιουργήσετε μια διάταξη ρίζας στη βάση του. Αυτή είναι η διάταξη που θα εφαρμόσει το Next.js σε όλες τις σελίδες της εφαρμογής σας.</p>
<p>Για να το επιδείξετε, δημιουργήστε ένα αρχείο με το όνομα <strong>layout.jsx</strong> και προσθέστε τον ακόλουθο κώδικα. p> </p>
<pre> <code><span>εξαγωγή</span> <span>προεπιλεγμένη</span> <span><span>συνάρτηση</span> <span>RootLayout</span>(<span>{ παιδιά } } span>) </span>{<br> <span>return</span> (<br> "en"</span>><br> {παιδιά}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Το στοιχείο ριζικής διάταξης αποδέχεται και αποδίδει το <strong>παιδιά</strong>. Ακολουθούν μερικά από τα πράγματα που πρέπει να γνωρίζετε σχετικά με μια διάταξη root:</p>
<ul> <li> Πρέπει να τη συμπεριλάβετε στο φάκελο της εφαρμογής. </li> <li> Αντικαθιστά τα <strong>_app.js</strong> και <strong>_document.js</strong> στο φάκελο σελίδας του Next.js 12. </li> <li> Πρέπει να συμπεριλάβετε ρητά την ετικέτα HTML και body. </li> <li> Είναι ένα στοιχείο διακομιστή από προεπιλογή. </li> </ul>
<p>Όπως αναφέρθηκε, η ριζική διάταξη ισχύει για όλες τις σελίδες, οπότε πώς μπορείτε να δημιουργήσετε προσαρμοσμένες διατάξεις για διαφορετικά τμήματα διαδρομής;</p>
<p>Στο φάκελο της εφαρμογής σας, μπορείτε να ορίσετε μια διαδρομή δημιουργώντας φακέλους για κάθε διαδρομή τμήμα. Για παράδειγμα, η δημιουργία ενός φακέλου που ονομάζεται <strong>άρθρα</strong> αντιστοιχεί στη διαδρομή διεύθυνσης URL <strong>εφαρμογή/άρθρα</strong>. Για να προσθέσετε περαιτέρω τμήματα διαδρομής, δημιουργήστε έναν υποφάκελο στον κύριο φάκελο διαδρομής. Για παράδειγμα, η προσθήκη ενός φακέλου που ονομάζεται <strong>trending</strong> εντός του φακέλου <strong>articles</strong> αντιστοιχίζεται στη διαδρομή URL <strong>app/articles/trending</strong>.</p>
<p>Όταν προσθέτετε ένα στοιχείο <strong>layout.jsx</strong> σε έναν φάκελο διαδρομής, θα εφαρμόζεται σε όλες τις σελίδες σε αυτόν τμήμα διαδρομής και τους υποφακέλους του. Για παράδειγμα, η προσθήκη ενός στοιχείου διάταξης στον φάκελο <strong>άρθρα</strong> θα εφαρμοστεί σε όλες τις σελίδες στη διαδρομή άρθρων, συμπεριλαμβανομένων εκείνων στον υποφάκελο <strong> trending</strong>. Εάν προσθέσετε επίσης ένα στοιχείο διάταξης στον φάκελο <strong> trending</strong>, η διάταξη στο φάκελο με τα άρθρα θα είναι ένθετη μέσα σε αυτόν.</p>
<h2 id="advantages-of-using-layouts"> Πλεονεκτήματα της χρήσης Layouts </h2>
<p>Next.js σάς δίνει τη δυνατότητα να δημιουργήσετε στοιχεία διάταξης που μπορείτε να χρησιμοποιήσετε ξανά σε διαφορετικά σελίδες. Αυτό σας επιτρέπει να έχετε μια συνεπή ματιά στον ιστότοπό σας χωρίς να δημιουργείτε αντίγραφο κώδικα σε πολλές σελίδες. Επιπλέον, οι διατάξεις σάς βοηθούν να εφαρμόζετε τις αλλαγές γρήγορα, επειδή δεν χρειάζεται να κάνετε αλλαγές σε κάθε σελίδα.</p>