Создаем панель навигации

Внутри нашего каталога компонентов мы создадим новый. Мы назовем его shared. Внутри этого каталога мы создадим новый файл, который мы назовем Navbar.jsx. Мы создадим нашу навигацию (Navbar) здесь.

// components/shared/Navbar.jsx
const Navbar = () => (
  <nav className="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
    <div className="container">
      <a className="navbar-brand" href="#">My Portfolio</a>
      <button
        className="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarText"
        aria-controls="navbarText"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span className="navbar-toggler-icon" />
      </button>
      <div className="collapse navbar-collapse" id="navbarText">
        <ul className="navbar-nav me-auto mb-2 mb-lg-0">
          <li className="nav-item">
            <a className="nav-link active" aria-current="page" href="#">Portfolio</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">About me</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
);
export default Navbar;

И мы импортируем и добавляем его в наш файл макета (Layout):

// components/Layout.jsx
import Navbar from './shared/Navbar';
const Layout = ({ children }) => (
  <div>
    <Navbar />
    <div className="main-container container">
      {children}
    </div>
  </div>
)
export default Layout;

Такими действиями мы создали красивую синюю панель навигации.

Создание интерфейса (UI)

Давайте теперь обсудим, как мы собираемся разместить все элементы портфолио. Я подумываю разделить все на строки и столбцы, где в каждой строке по 2 элемента. Мы можем изменить наш index.js на:

// pages/index.js
import Layout from '../components/Layout';
export default function Home() {
  const entries = ['Project 1', 'Project 2', 'Project 3', 'Project 4'];
  return (
    <Layout>
      <div className="entries">
        <div className="row justify-content-start  ">
          {entries.map((entry) => (
            <div className="col-md-6">
              <div className="entry mb-3">
                <div className="main-image">
                  <img src="https://via.placeholder.com/600x400" />
                  <h1>{entry}</h1>
                  <p>
                    About
                    {' '}
                    {entry}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Layout>
  );
}

Давай посмотрим что здесь происходит. Мы смоделируем 4 записи портфолио с помощью массива. Чуть позже мы заменим массив фактическим содержимым.

Мы добавим в это немного CSS. В папке public/ или в папке styles/ вы найдете файл css с именем globals.css, содержимое которого мы удалим и заменим на:

// publi/globals.css
.main-container {
  padding-top: 70px;
}
.entries .main-image img {
  width: 100%;
  display: block;
}

У нас должно получиться что-то вроде этого:

Создаем панель навигации

Сейчас мы просто используем изображения-заполнители. Позже мы заменим их подходящими изображениями, а также воспользуемся компонентом Image в Next.js.

Интерфейс (UI) для одного элемента портфолио

Теперь, когда у нас есть главная страница, на которой мы можем отображать все элементы нашего портфолио, нам следует подумать о создании страницы, на которой будет отображаться один элемент портфолио.

Здесь вступает в игру система маршрутизации Next.js. Видите ли, каждый файл в каталоге pages — это маршрут. Поэтому, если вы создадите файл и компонент testpage.jsx и перейдете по адресу http://localhost:3000/testfile, вы должны увидеть содержимое компонента.

Это безумно круто, и это одна из вещей, которые делают Next.js таким хорошим. Это также работает с динамическим содержимым. Если вы заключите имя файла в квадратные скобки, NextJS будет рассматривать его как динамический файл.

Мы создадим новую папку в папке pages, которую мы называем portfolio. Внутри этой папки мы создадим файл, который будем называть [slug].jsx . Этот файл будет содержать отдельные элементы нашего портфолио. Чтобы проверить его динамические возможности, мы можем написать компонент для быстрого тестирования:

// pages/portfolio/[slug].jsx

const PortfolioItem = () => {
  return (
    <div>
      This is a test component
    </div>
  );
};
export default PortfolioItem;

Независимо от того, какой URL вы используете, Next.js будет отображать один и тот же компонент.

http://localhost:3000/portfolio/(45231
http://localhost:3000/portfolio/test
http://localhost:3000/portfolio/fsdfsdfsdfs

Компонент просто терпеливо сидит и ждет, пока его заполнят динамическими данными, которые будут показаны нашим замечательным посетителям.

// pages/portfolio/[slug].jsx

import Layout from '../../components/Layout';
const PortfolioItem = () => {

  return (
    <Layout>
      <div className="row">
        <div className="portfolio-image text-center mb-4">
          <div className="col-md-12">
            <img src="https://via.placeholder.com/1000x500" />
          </div>
        </div>
      </div>
      <div className="row">
        <div className="portfolio-content">
          <div className="col-md-12">
            <div className="portfolio-headline text-center m-2">
              <h1>Project</h1>
            </div>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
              doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
              et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
              quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem i
              psum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
              modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut
              enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
              laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
              reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
              vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
            </p>
          </div>
        </div>
      </div>
    </Layout>
  );
};
export default PortfolioItem;

По большей части это заполнитель для наших реальных данных. Отдельная страница портфолио должна теперь выглядеть примерно так:

Создаем панель навигации

Никогда не говорил, что это будет выглядеть красиво.

На нашей главной странице отображаются все объекты портфолио. У нас также есть страница с одним элементом портфолио. Мы должны развернуть и запустить наш бэкэнд Strapi прежде чем мы вернемся к нашему фронтэнду приложения. Как только мы запустим бэкэнд Strapi, мы сможем наполнить его контентом, который будет использован во фронтенде.

Была ли эта страница полезной?