В процессе разработки веб-приложений управление страницами и навигация между ними являются важнейшим аспектом. В этой серии статей мы углубимся в основы создания страниц и реализации навигации в Next.js. Эти основополагающие концепции необходимы для создания гибких и управляемых веб-приложений.
Создание и отображение первой страницы
Во-первых, давайте разберемся, как создать и отобразить простую страницу в формате Next.js. Вы можете создавать страницы, создавая файлы в pages каталоге вашего проекта. Например, чтобы создать страницу приветствия, вы можете создать файл с именем welcome.js в pages каталоге.
// pages/welcome.js
function WelcomePage() {
return <h1>Welcome to Next.js!</h1>;
}
export default WelcomePage;
В приведенном выше фрагменте кода мы создали простую страницу приветствия. Когда вы откроете /welcome путь в своем веб-браузере, вы увидите сообщение «Добро пожаловать в Next.js !» отображается.
Базовый Routing
Next.js предлагает надежную и интуитивно понятную routing систему, которая упрощает навигацию между страницами. Routing in Next.js основан на pages каталоге, где каждый файл в этом каталоге соответствует определенному пути. Например, файл, указанный about.js в pages каталоге, создаст страницу, доступную по указанному /about пути.
Создание ссылок и навигации
Для создания ссылок между страницами и навигации между ними мы можем использовать <Link> компонент из next/link библиотеки. Ниже приведен пример создания ссылки со страницы приветствия на страницу о нас.
// 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;
В приведенном выше примере, когда вы нажмете ссылку «Подробнее о нас», вы будете перенаправлены на /about страницу.
Заключение
В этом разделе мы рассмотрели, как создавать и отображать простые страницы Next.js и как реализовать навигацию между страницами с помощью pages каталога и <Link> компонента. Это важные начальные шаги в создании Next.js приложения. В следующих статьях мы продолжим исследовать другие аспекты Next.js создания динамических и интерактивных веб-приложений.