Настраиваем Фронтенд

Для создания нового проекта Next.js необходимо сначала установить Node.js. Если он еще не установлен, посетите сайт https://nodejs.org/ и установите Node.js перед тем, как продолжить.

Создаем новый проект Next.js

Next.js поставляется с очень хорошим генератором проекта. Мы создадим наш новый проект, набрав:

$ npx create-next-app my-portfolio

Это создаст для нас новый проект. Мы переходим внутрь него (cd) и запускаем:

$ cd my-portfolio
my-portfolio $ npm run dev

Если вы посетите http://localhost:3000/, вы должны увидеть стартовую страницу Next.js:

Настраиваем Фронтенд

Установка Bootstrap 5

Как упоминалось ранее, мы собираемся использовать Bootstrap 5 для наших проектов. Мы можем начать с установки пакета Bootstrap 5 NPM:

$ npm install bootstrap@next

Внутри нашего файла /pages/_app.js мы импортируем только что установленную библиотеку:

// /pages/_app.js
import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.min.css'; // Added
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

Чтобы убедиться, что это работает, мы можем заменить все внутри файла index.js простым контейнером bootstrap и текстом:

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

Если вы сейчас посмотрите на http://localhost: 3000/, то вы увидите, что наша строка текста смещена к середине. Если мы удалим контейнер из нашего класса div, текст будет прижат слева нашей страницы. Это означает, что наш Bootstrap запущен и работает.

Axios

Мы будем общаться со Strapi, отправляя и получая JSON. Мы будем использовать «Axios» для выполнения тяжелой работы. Давайте установим его:

$ npm install axios

Вот и все, что нужно для создания нашего фронтэнда. Давайте начнем создавать интерфейс фронтенда.

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