W procesie tworzenia aplikacji webowych zarządzanie stronami i poruszanie się pomiędzy nimi jest kluczowym aspektem. W tej serii artykułów zagłębimy się w podstawy tworzenia stron i implementacji nawigacji w Next.js. Te podstawowe koncepcje są niezbędne do tworzenia elastycznych i łatwych w zarządzaniu aplikacji internetowych.
Tworzenie i wyświetlanie pierwszej strony
Najpierw zrozumiemy, jak utworzyć i wyświetlić prostą stronę w formacie Next.js. Możesz tworzyć strony, tworząc pliki w pages katalogu swojego projektu. Na przykład, aby utworzyć stronę powitalną, możesz utworzyć plik o nazwie welcome.js w pages katalogu.
// pages/welcome.js
function WelcomePage() {
return <h1>Welcome to Next.js!</h1>;
}
export default WelcomePage;
W powyższym fragmencie kodu utworzyliśmy prostą stronę powitalną. Po uzyskaniu dostępu do /welcome ścieżki w przeglądarce internetowej zobaczysz komunikat „Witamy w Next.js !” wystawiany.
Podstawowy Routing
Next.js oferuje solidny i intuicyjny routing system, który ułatwia nawigację między stronami. Routing in Next.js opiera się na pages katalogu, przy czym każdy plik w tym katalogu odpowiada określonej ścieżce. Na przykład plik nazwany about.js w pages katalogu utworzy stronę dostępną w /about ścieżce.
Tworzenie linków i nawigacji
Aby tworzyć linki między stronami i nawigować między nimi, możemy skorzystać z <Link> komponentu z next/link biblioteki. Poniżej znajduje się przykład tworzenia linku ze strony powitalnej do strony o nas.
// pages/welcome.js
import Link from 'next/link';
function WelcomePage() {
return(
<div>
<h1>Welcome to Next.js!</h1>
<Link href="/about">Learn more about us</Link>
</div>
);
}
export default WelcomePage;
W powyższym przykładzie kliknięcie linku „Dowiedz się więcej o nas” spowoduje przekierowanie na stronę /about.
Wniosek
W tej sekcji zbadaliśmy, jak tworzyć i wyświetlać proste strony w programie Next.js oraz jak implementować nawigację między stronami przy użyciu pages katalogu i <Link> komponentu. Są to kluczowe początkowe kroki w budowaniu Next.js aplikacji. W nadchodzących artykułach będziemy nadal badać inne aspekty Next.js tworzenia dynamicznych i interaktywnych aplikacji internetowych.