- PVSM.RU - https://www.pvsm.ru -
Категорически приветствую.
Столкнулся я тут с необходимостью подключить Bootsrtap в Next.js. Беглый гуглёж дал несколько тем на stackoverflow, парочку монструозных (всё в одном и все пакеты устарели ) шаблонов на гитхабе, и немножечко оффдоков. На деле же всё оказалось довольно тривиально, но, надеюсь, эта заметка сэкономит кому-то время.
Если кто еще не в курсе, Next.js это фреймворк, предлагающий из коробки возможность создания универсальных/изоморфных приложений с React. Есть даже аналог create-react-app — create-next-app.
На Хабре уже было несколько статьей про него [1].
Стартуем новый проект. Если не установлен 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 [2]/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 (
<html>
<Head>
<link rel="stylesheet" href="/_next/static/style.css" />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
Всё. теперь мы можем использовать компоненты reactstrap. Главное, не забыть импортировать bootstrap.min.css. Смело правим pages/index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import { Card, CardText, CardHeader, CardBody, Button } from 'reactstrap';
export default () => (
<div>
<Card>
<CardBody>
<CardHeader>Hello Next.js!</CardHeader>
<br/>
<CardText>Bootstrap 4 power!</CardText>
<Button color="danger">OK</Button>
</CardBody>
</Card>
</div>
)
}
Автор: frostspb
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/286960
Ссылки в тексте:
[1] было несколько статьей про него: https://habr.com/search/?q=%5Bnext.js%5D&target_type=posts
[2] zeit: https://habr.com/users/zeit/
[3] Ссылка на рабочий пример: https://github.com/frostspb/bootstrap_nextjs_example
[4] Источник: https://habr.com/post/417979/?utm_campaign=417979
Нажмите здесь для печати.