Создание визуала

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

Мы создадим новую папку в корневом каталоге под названием components. В каталоге компонентов мы создадим новый файл, который назовем Layout.jsx:

// /components/Layout.jsx

const Layout = ({ children }) => (
  <div>
    {children}
  </div>
)
export default Layout;

Все содержимое нашей страницы будет передано в этот компонент в качестве аргумента. Другими словами, мы обернем содержимое нашей страницы внутри этого компонента Layout. Давайте импортируем этот компонент в наш индексный файл и поместим в него наш контент:

// /pages/index.js

import Layout from '../components/Layout';

export default function Home() {
  return (
    <Layout>
      <div className="container">
        Is this working?
      </div>
    </Layout>
  );
};

Если вы перейдете на http://localhost:3000/, все должно выглядеть одинаково.

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