news.shamcode.ru | Подключение bootstrap в Next.js

Подключение bootstrap в Next.js

среда, 25 июля 2018 г. в 00:17:24

JavaScript

Категорически приветствую.

Столкнулся я тут с необходимостью подключить 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 (
      <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>
 )
}

Ссылка на рабочий пример