Подключение bootstrap в Next.js
Категорически приветствую.
Столкнулся я тут с необходимостью подключить Bootsrtap в Next.js. Беглый гуглёж дал несколько тем на stackoverflow, парочку монструозных (всё в одном и все пакеты устарели) шаблонов на гитхабе, и немножечко оффдоков. На деле же всё оказалось довольно тривиально, но, надеюсь, эта заметка сэкономит кому-то время.
Если кто еще не в курсе, Next.js это фреймворк, предлагающий из коробки возможность создания универсальных/изоморфных приложений с React. Есть даже аналог create-react-app — create-next-app.
На Хабре уже было несколько статьей про него.
Стартуем новый проект. Если не установлен create-next-app, то ставим его:
sudo npm install -g create-next-app
Далее, создаём новый проект:
create-next-app bs_exapmle
Ставим reactsrap и bootsrap:
cd bs_exapmle
npm install --save reactstrap bootstrap
Итак, нам надо подключить Bootstrap. Попытка сделать это в лоб ничего не даст, кроме ошибки в консоли. Из коробки фреймворк поддерживает только styled-components. Чтобы подключить что-то еще надо ставить css-загрузчик zeit/next-css.
npm install --save @zeit/next-css
И настраиваем его в next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()
Осталось чуть-чуть! Создаем файл pages/_documents.js Здесь будут подключаться скомпиленые стили
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (
Всё. теперь мы можем использовать компоненты reactstrap. Главное, не забыть импортировать bootstrap.min.css. Смело правим pages/index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import { Card, CardText, CardHeader, CardBody, Button } from 'reactstrap';
export default () => (
Hello Next.js!
Bootstrap 4 power!
)
}
Ссылка на рабочий пример
