Если вы никогда не слышали о NextJS, это фреймворк, созданный для рендеринга приложений React на стороне сервера, с открытым исходным кодом и созданный замечательными парнями из Zeit.

Быстрый отказ от ответственности

Поскольку NextJS содержит множество очень интересных функций, я бы не рекомендовал вам использовать описанные здесь методы, если вы не на 100% уверены, что они вам понадобятся.

Как блестяще сказал Дэн Абрамов, вам может не понадобиться Redux, и я буду иметь право заявить, что вам также может не понадобиться настраиваемый сервер в вашем веб-приложении NextJS.

Redux

Чтобы Redux работал с вашим NextJS, нужно учесть только одно большое предостережение: при рендеринге вашей страницы на сервере вам необходимо подтвердить, что вы будете создавать разные store при каждом обращении, сделанном на вашем сервере, иначе вы можете закончить смешивание данных от разных пользователей.

Передав boolean из reqпараметра в getInitialProps() из вашего компонента, вы сможете определить на initStore(), находитесь ли вы на клиенте или на сервере.

Кроме того, по очевидным причинам полезно проверить, не был ли еще создан магазин, если вы работаете на стороне клиента. Этот метод гарантирует, что у вас будет один (и только один) магазин для каждого пользователя.

Взято из примера на репозитории NextJS.

Параметризованная маршрутизация с ExpressJS

Если вам просто нужны простые маршруты между представлениями вашего приложения, пожалуйста, не используйте это решение. NextJS предлагает готовый компонент <Link />, который можно использовать для навигации по различным .js файлам, которые вы определяете как представления (подробнее о NextJS Readme), даже с классной альтернативой предварительной выборки.

Итак, когда использовать параметризованную маршрутизацию?

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

Настроить собственный сервер

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

Выше вы можете найти упрощенный фрагмент из примера приложения, как вы могли заметить: он использует Express, хотя это не обязательно, и вы можете найти другие альтернативы, я настоятельно рекомендую его, особенно из-за его простоты.

Как вам может быть интересно, четвертый параметр в нашем app.render()method - это объект, который должен быть передан нашему компоненту через getInitialProps(), и mate.js будет иметь дело с внутренним содержимым для рендеринга.

Запустите NextJS с настраиваемым сервером

Не может быть проще, нужно просто зайти в свой package.json и поменять

{
    scripts: {
"start": "next"
    }
}

to

{
scripts: {
"start": "node server.js"
}
}

Если, конечно, server.js находится в корне вашего проекта.

Развертывать

В настоящее время

С Сейчас это не может быть проще, учитывая, что он установлен глобально и у вас есть зарегистрированная учетная запись, вы можете просто ввести now в своем терминале. Сделанный.

Heroku

Для развертывания на Heroku у вас есть очень хорошие heroku-nextjs, которые также делают его безупречным. Конечно, вам также понадобится активная учетная запись на Heroku, затем зафиксируйте свои изменения и git push heroku master.

Репозиторий тестовых случаев:

Если вам понравилась эта статья, порекомендуйте ее своей сети, нажав 💚. Это также дает мне очень ценный отзыв, конечно, если вы хотите предоставить более расширенный, раздел комментариев / ответов к вашим услугам!