Jak utworzyć niestandardowy układ w Next.JS
Next.js to potężny framework do tworzenia wydajnych aplikacji React. Jedną z jego funkcji jest możliwość tworzenia niestandardowych układów stron, co pozwala na stworzenie spójnego projektu, który jest łatwy w utrzymaniu i aktualizacji w całej aplikacji.
Tworzenie niestandardowego komponentu układu w Next.JS
W folderze o nazwie components w projekcie Next.js utwórz plik Layout.jsx i dodaj następujący kod, aby utworzyć składnik układu.
import Head from 'next/head'
import Header from './Header.jsx'
import Footer from './Footer.jsx'
const Layout = (children) => (
<div>
<Head>
<title>My App</title>
<link rel="stylesheet" href="/static/css/style.css" />
</Head>
<Header />
{children}
<Footer />
</div>
)
export default Layout
Ten komponent importuje komponenty Header i Footer i akceptuje dzieci jako rekwizyty. Renderuje dzieci pomiędzy komponentami Header i Footer. Gdy zawiniesz stronę z tym układem, nagłówek i stopka będą wyświetlane u góry iu dołu.
Korzystanie z komponentu układu
Aby użyć komponentu układu, zaimportuj go do komponentu strony i użyj go w sposób pokazany poniżej.
import Layout from '../components/Layout'
const Page = () => (
<Layout>
<h1>Home</h1>
</Layout>
)
export default Page
Zastosuje układ do tej strony. Możesz powtórzyć ten proces dla wszystkich stron, na których chcesz zastosować układ.
Aby użyć układu na wszystkich stronach w aplikacjach jednocześnie, zaimportuj komponent układu do pliku /page/_app.js i użyj go w następujący sposób.
import Layout from "../components/layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
Przedstawione do tej pory przykłady wykorzystują 12-stronicowe foldery Next.js. W Next.js 13 tworzysz układ w folderze aplikacji (w chwili pisania tego tekstu jest to wersja beta).
Tworzenie niestandardowego układu w folderze aplikacji
Folder aplikacji w Next.js 13 wymaga utworzenia układu głównego u jego podstawy. Jest to układ, który Next.js zastosuje do wszystkich stron Twojej aplikacji.
Aby zademonstrować, utwórz plik o nazwie layout.jsx i dodaj następujący kod.
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Komponent układu głównego akceptuje i renderuje elementy potomne . Poniżej znajduje się kilka rzeczy, które powinieneś wiedzieć o układzie głównym:
- Musisz dołączyć go do folderu aplikacji.
- Zastępuje _app.js i _document.js w folderze strony Next.js 12.
- Musisz jawnie dołączyć tag HTML i body.
- Domyślnie jest to komponent serwera.
Jak wspomniano, układ główny dotyczy wszystkich stron, więc jak tworzyć niestandardowe układy dla różnych segmentów tras?
W folderze aplikacji możesz zdefiniować trasę, tworząc foldery dla każdego segmentu trasy. Na przykład utworzenie folderu o nazwie article maps to URL app/articles . Aby dodać dalsze segmenty trasy, utwórz podfolder w głównym folderze trasy. Na przykład dodanie folderu o nazwie trendy wewnątrz folderu artykułów jest mapowane na ścieżkę adresu URL app/articles/trending .
Gdy dodasz komponent layout.jsx do folderu trasy, będzie on stosowany do wszystkich stron w tym segmencie trasy i jego podfolderach. Na przykład dodanie komponentu układu do folderu artykułów będzie miało zastosowanie do wszystkich stron w ścieżce artykułów, w tym w podfolderze trendów . Jeśli dodasz również komponent układu do folderu trendów , układ w folderze artykułów zostanie w nim zagnieżdżony.
Zalety korzystania z układów
Next.js umożliwia tworzenie elementów układu, których można ponownie używać na różnych stronach. Dzięki temu możesz uzyskać spójny wygląd całej witryny bez powielania kodu na wielu stronach. Ponadto układy ułatwiają szybkie wprowadzanie zmian, ponieważ nie trzeba wprowadzać zmian na każdej stronie.
Dodaj komentarz