next on netlify
v3.0.1
Мы выходим из строя next-on-netlify в пользу важного плагина NetLify Next.js Build. Пожалуйста, посетите эту проблему, чтобы узнать больше о том, как помимо next-on-netlify и задайте любые вопросы. Вы также можете посетить нашего простых миграционных документов для помощи, мигрируя в плагин.
next-on-netlify -это утилита для обеспечения рендеринга на стороне сервера в next.js on netLify. Он охватывает ваше приложение на крошечный уровень совместимости, так что страницы могут использовать функции NetLify для отображения на стороне сервера.
getStaticPaths npm install --save next-on-netlify
Мы должны создать наше приложение для следующего приложения. Вы можете прочитать больше о Serverless Next.js здесь.
Это очень просто. Просто создайте файл next.config.js в корне вашего проекта и напишите следующее:
// next.config.js
module . exports = {
// Target must be serverless
target : "serverless" ,
} ;Если в развертывании необходимы двоичные файлы, необходима следующая конфигурация (Prisma является примером):
// next.config.js
module . exports = {
// Target must be experimental-serverless-trace
// Your build time will be longer with this option
target : "experimental-serverless-trace" ,
} ; Пакет ближайшего на сети добавляет команду next-on-netlify . Когда мы запускаем эту команду, возникает некоторая магия, чтобы подготовить наше приложение Next.js для хостинга на NetLify*.
Мы хотим, чтобы команда следующей на сети запустилась после того, как мы создадим наше приложение Next.js. Итак, давайте добавим крюк PostBuild в наш файл package.json. Вы должны добавить "postbuild": "next-on-netlify" в существующие сценарии, как так:
{
"name": "my-nextjs-app",
"scripts": {
"dev": "next",
"build": "next build",
"postbuild": "next-on-netlify"
},
...
}
*Если вам интересно с «магией», ознакомьтесь с хорошо документированным файлом next-on-netlify.js .
Мы почти закончили! Мы просто должны сообщить NetLify, как построить наше приложение Next.js, где расположена папка функций, и какую папку для загрузки в CDN. Мы делаем это с помощью файла netlify.toml в корне вашего проекта и следующих инструкций:
[ build ]
command = " npm run build "
functions = " out_functions "
publish = " out_publish " Примечание: out_functions и out_publish придаются жесткому кодированию. Они не настраиваются в данный момент.
Если ваш проект содержит частные подмодули, чтобы его развернуть, вам нужно будет:
Создайте ключ развертывания в NetLify и добавьте его в соответствующие подмодулы, чтобы они могли быть клонированы в процессе развертывания.
Убедитесь, что удаленные подставки установлены в формате ssh (то есть [email protected]:owner/project.git , а не https://... ). Внутри каталога подмодулей, пульт GIT может быть обновлен с помощью:
# git remote set-url [remote] [url]
git remote set-url origin [email protected]:owner/project.gitМы закончили. Давайте развернуть
Если вы не знакомы с NetLify, следуйте инструкциям по развертыванию здесь: https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-site-to-netlify/
Я рекомендую вам использовать next dev для создания и предварительного просмотра вашего приложения локально.
Но если вы хотите эмулировать развертывание NetLify на вашем компьютере, вы также можете запустить next-on-netlify локально, а затем использовать netlify-cli для предварительного просмотра результата.
Во-первых, установите последнюю версию netlify-cli (вы также можете посмотреть на package.json, чтобы увидеть версию, с которой была протестирована следующая на сеть):
npm install -g netlify-cli Затем добавьте следующий блок [dev] в свой netlify.toml :
# netlify.toml
# [build]
# ...
[ dev ]
functions = " out_functions "
publish = " out_publish "
# We manually set the framework to static, otherwise Netlify automatically
# detects Next.js and redirects do not work.
# Read more: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
framework = " #static " Наконец, добавьте следующие строки в свой .gitignore :
# .gitignore
# Files generated by next-on-netlify command
/out_publish/
/out_functions/Теперь вы все готовы.
С этого момента, когда вы хотите предварительно просмотреть приложение локально, просто запустите:
npx next-on-netlify watch : The next build будет работать для создания вашего приложения Next.js и next-on-netlify чтобы подготовить ваше приложение Next.js для совместимости с NetLify. Любые изменения исходного кода запускают другую сборку.netlify dev : Это будет эмулировать NetLify на вашем компьютере и позволит вам предварительно просмотреть ваше приложение на http://localhost:8888 .Примечание:
Режим предварительного просмотра еще не доступен локально, используя netlify dev , для статических страниц без повторной переосмысления или отрыва. Это будет поддержано в ближайшее время.
На данный момент режим предварительного просмотра поддерживается в производстве для всех типов страниц Next.js.
Вы можете определить пользовательские перенаправления в _redirects и/или в вашем файле netlify.toml . Приоритет этих правил:
_redirectsnext-on-netlify перенаправления В настоящее время нет поддержки перенаправления, установленных в вашем файле netlify.toml .
Узнайте больше о NetLify Redirects здесь.
next-on-netlify создает одну функцию NetLify для каждой из ваших страниц SSR и конечных точек API. В настоящее время вы можете создавать только пользовательские функции NetLify с использованием @netLify/plugin-nextjs.
Если ваша страница/маршрут API Next.js заканчивается в -background , она будет рассматриваться как фоновая функция NetLify. Примечание. Фоновые функции доступны только на определенных планах.
Вы можете использовать идентификацию NetLify с next-on-netlify . Для всех страниц с рендерингом на стороне сервера (GetInitialProps*, GetServersIdeProps и API-маршруты) вы можете получить доступ к объекту ClientContext через параметр req .
Например:
const Page = ( ) => < p > Hello World! </ p > ;
export const getServerSideProps = async ( { req } ) => {
// Get event and context from Netlify Function
const {
netlifyFunctionParams : { event , context } ,
} = req ;
// Access Netlify identity
const { identity , user } = context . clientContext ;
return {
props : { } ,
} ;
} ;
export default Page ;Чтобы получить доступ к NetLify Identity со страниц без рендеринга на стороне сервера, вы можете создать следующий маршрут API, который выполняет логику, связанную с идентификацией:
export default async function getUser ( req , res ) {
// Get event and context from Netlify Function
const {
netlifyFunctionParams : { event , context } ,
} = req ;
// Access Netlify identity
const { user } = context . clientContext ;
// Respond with user object
res . json ( { user } ) ;
}* Обратите внимание, что страницы с использованием getInitialProps представляют собой только серверную сторону на начальной загрузке страницы, а не в том случае, когда пользователь перемещает клиентскую сторону между страницами.
getStaticPaths Страницы задолженности ведут себя иначе с next-on-netlify чем с Next.js. На next.js, когда навигации по пути, который не определяется в getStaticPaths , он сначала отображает запасную страницу. Next.js затем генерирует HTML на заднем плане и кэширует его для будущих запросов.
С next-on-netlify , при перемещении по пути, который не определяется в getStaticPaths , ИТ-сервер отображает страницу и отправляет ее непосредственно пользователю. Пользователь никогда не видит запасной страницы. Страница не кэширована для будущих запросов.
Подробнее об этом см.: Выпуск № 7
Наше существующее решение для следующего/изображения не очень эффективно. У нас есть улучшение производительности на нашей дорожной карте, зависит от внутренней работы.
Чтобы получить лучшую производительность сейчас, мы рекомендуем использовать облачный провайдер, как Cloudarian (см. Docs Next.js).
Этот пакет поддерживается Линдси Левин, Финн Вуэльм и Кэссиди Уильямс.
Вырастайте @Mottox2 (пионер хостинга next.js on netLify) и @DanielCondemarin (автор Serverless-next.js для AWS). Они были большим вдохновением для этого пакета.
? Большое «спасибо» следующим людям за их вклад, поддержку и бета -тестирование:
Следующие сайты построены с next-on-netlify :
urdayatedReact.com (через Twitter)
missionbit.org (#18)
Gemini.com
bigbinary.com
Создайте свой собственный блог и разверните в NetLify!
Вы строите что-то удивительное с next-on-netlify ? Дайте нам знать, и мы представим это здесь :)
