Рубрики
Без рубрики

Мой опыт миграционные проекты на Next.js

Проблемы, с которыми я столкнулся во время миграционных проектов Classic Review.js на Next.js и как я их решил. Помечено в React, JavaScript, WebDev, Frontend.

Официальная документация О миграции до Next.js довольно всеобъемлющена и направляет вас через все общие шаги, которые вам нужно предпринять в процессе.

Тем не менее, могут быть некоторые случаи использования, относящиеся только к вашему приложению Review.js.

Папка страниц

Next.js Основывает маршрутизацию файловой системы на страницы папка. Это довольно аккуратный подход, но приходит с некоторыми ограничениями. Проблема с классическими приложениями Review.js состоит в том, что некоторые из них могут даже не иметь страницы Папка или у него глубоко вложены в структуру папки.

root
|
└───src
│   │
│   └───app
│       │   App.tsx
│       │   ...
|       └───pages
│   
└───template
│   │
│   └───components
│   └───colors

Более того – Next.js позволяет только два места страницы папка:

  • root/pages.
  • root/src/страницы

Так что имейте в виду, что вам придется сделать некоторую рефакторинг структуры папки, прежде чем перейти к Next.js.

Компоненты, которые используют веб-API

Вы, вероятно, знаете, что вы не можете использовать окно Объектная серверная сторона, и вам нужно всегда проверять, есть ли окно определяется до доступа к нему.

Для компонентов, которые широко используются веб-API (графики, анимации) и слишком сложные для рефакторов, легче динамически импортировать весь компонент из родительского компонента.

import dynamic from 'next/dynamic';

const ChartsComponent = dynamic(
  async () => dynamic(() import('app/components/ChartsComponent')),
  { ssr: false },
)

Следующий роутер ready

Иногда пользователь перенаправляется в ваше приложение React.js из других услуг с некоторой информацией в параметрах запроса. Это может быть электронное письмо о подтверждении регистрации с подтверждением токена: https://yourreactapp.com/token или перенаправление от поставщика ОАУТ. В таких случаях вы обычно увлекаетесь этими параметрами запроса, используя window.location.search а затем обработать их. Я заметил, что когда я переместил свое приложение к Next.js Эти параметры запроса не появлялись в следующем роутере на первом визуализации и только на втором рендере, который я мог видеть их в Router.Query . Это поведение нарушило мой процесс аутентификации. Оказалось, что это потому, что следующие поля маршрутизатора являются Обновлена сторона сервера первая И только тогда сторона клиента. Чтобы пропустить первое обновление с пустым запросом, который вы должны использовать Router.iready поле в useffect. Крюк вторым аргументом:

import { useRouter } from 'next/router';

const RedirectsCatcherComponent = () => {
  const router = useRouter();
  useEffect((() => {
    if (router.query.token) {
      proceedAuthentication(router.query.token);
    }
  }), [router.isReady])
}

Dockerfile.

Если вы используете Docker Containers в вашей инфраструктуре, вы можете использовать пример DockerFile в Официальная документация или если вы используете NPM :

FROM node:alpine AS builder

WORKDIR /usr/src/app

COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
RUN npm install --production

USER node

FROM node:alpine
WORKDIR /usr/src/app
COPY --from=builder /usr/src/app .
EXPOSE 3000

ENV NODE_OPTIONS=--max_old_space_size=1024

CMD ["npm", "start"]

В основном то, что он здесь делает, это строит статические активы, используя производственные и разработки зависимостей, а затем устанавливают только производственные зависимости, которые необходимо запустить Next.js Server.

Обратите внимание Env здесь. Если ваши ресурсы контейнера Docker ограничены, процесс сборки иногда может сбиться с ошибкой Неэффективные отметки уплотнения рядом с неисправностью выделения пределов кучи - JavaScript Heap вне памяти . Эта переменная среды решает проблему. Просто убедитесь, что это немного меньшее значение, установлено, чем предельное значение памяти контейнера Docker.

Вы больше не статичны

С большой властью приходит большая ответственность

Я уверен, что вы решили использовать Next.js главным образом, потому что вы хотели улучшить производительность вашего приложения React.js с помощью рендеринга на сторону сервера. Одно следует рассмотреть, это то, что вы в качестве разработчика Frontend будут нести ответственность за запущенный сервер Node.js, который будет служить статическим активам. Все, что работает, как правило, связано с крахом, так что имейте в виду, что вам нужно будет рассмотреть какое-то решение по перебору. Это может быть PM2. или Ночевка Или даже несколько контейнеров Docker в конфигурации Nginx Upstream.

Можно Next.js заменить nginx?

Это зависит от того, какую работу ваш Nginx выполняет. Если это только модифицирующие заголовки, затем next.js может сделать это тоже Отказ Это даже может установить заголовки безопасности с помощь сторонней библиотеки . Для некоторых более продвинутых случаев использования, такие как определение IP-адреса реального пользователя, вам, вероятно, нужно будет использовать Custom Next.js Сервер Отказ

Аутентификация

Как я уже сказал, если вы используете Next.js, вы, вероятно, собираетесь использовать рендеринг на стороне сервера. Типичная клиентская набоя ATT.JS обычно использует токены JWT для аутентификации и сохраняет их в хранилище браузера. Как вы также можете узнать, что хранилище браузера не доступно на стороне сервера, и вы не сможете получать токены и использовать их, чтобы сделать аутентифицированные запросы на серверную сторону серверов Backend и рендеринга. Если это ваше дело, то вам нужно подумать о хранении токенов аутентификации в cookie. После этого вы сможете получить токены аутентификации в req.Headers.cookie Серверная сторона.

async function getServerSideProps(context) {
  if (req.headers.cookie) {
    const token = getToken(req.headers.cookie);
    // make requests
  }
}

Если вам нужно выполнить аутентификацию клиента, вы просто извлекаете файлы cookie из браузера.

Процесс перемещения от хранилища браузера к файлам cookie с точки зрения хранения токенов, как правило, довольно сложный, особенно если вы используете протокол OAUTH. Если вы храните токены клиента, то, вероятно, у вас, вероятно, есть механизм, который периодически обновляет эти токены и проверяет, действительно ли они. Вам нужно будет переместить этот механизм на стороне бэкэнда, поскольку бэкэнда будет нести ответственность за обработку токенов и положить их в куки. Если вы используете провайдер OAuth, это еще сложнее. Так что подумайте об этом шаге заранее.

На данный момент это так. Из моего опыта, мигрируя на Next.js большую часть времени было удивительно положительным опытом, поэтому, если вы планируете перейти к Next.js – сделайте подготовку и сделать это сейчас!

Оригинал: “https://dev.to/rinatrezyapov/my-experience-migrating-projects-to-next-js-2hld”

Читайте ещё по теме: