Михаил Р.

Любая авторизация должна выполнятся на строне сервера, всё что на стороне клиета обходится на раз!
Как именно - дело Вашею Есть десятки систем авторизациию Имя + пароль - самая распостраненная

Вы были близки.
.closest() ищет исключительно вверх по дереву, начиная с самого элемента. А .text не является родительским элементом для картинки.

Таким образом, нужно сначала найти общего родителя между картинкой и .text, и в этом общем родителе найти .text:

-const message = event.target.closest('.text').textContent;
+ const message = event.target.closest('.message_container').querySelector('.text').textContent;

const regex = /#[a-f\d]+;$/i;
const replacement = '<span class="color" style="background: $&"></span>';

document.querySelectorAll('селектор сами сообразите').forEach(n => {
  n.innerHTML = n.innerText.replace(regex, replacement);
});

Нет, оно того не стоит. Любая работа должна быть оплачена. Ибо сейчас напишешь за свой счет, а потом начальника скажет "о, отлично, молодец, можем теперь сэкономить на программистах и поддержке, у меня как раз знакомый ищет, ща его поставлю, а ты можешь быть свободен, заодно выпишу себе премию, во какой я молодец". Этот код решает задачи бизнеса. Если бизнес готов тратить на его поддержку и сопровождение деньги - то это проблемы этого бизнеса. Почему это наемный работник должен решать проблемы бизнеса за свой счет? Правильно сделать так: оформить все в виде какого-то документа с конкретными аргументами, цифрами, графиками и т.п. и выдать его начальству. Типа сейчас поддержка проекта стоит столько-то, приносит такие-то проблемы, переписать будет стоить столько-то, сопровождение нового будет столько-то, оно решает такие-то проблемы. И выдаете данный документ начальству. Можно даже в бумажном виде в нескольких экземплярах. А далее пусть у начальства голова болит.

Берешь квадратик, рисуешь посередине кирпичи, траву, или что ты там хочешь.
Разрезаешь его пополам, по вертикали, например.
Меняешь половики местами, видишь шов.
Подрисовываешь так, чтобы шва небыло.
Разрезаешь теперь по горизонтали, снова меняешь местами, убираешь шов.

Это худшая задача для реляционных баз данных, что там будет происходить с foreign_key я вообще молчу, все решаемо но скорости будут не очень

Если нет связанных таблиц (что логично, твой id на самом деле не идентификатор, не вводи народ в заблуждение и назови по другому) в твоем случае скорее всего можно схитрить, можно key_id считать на лету, т.е. ключевое поле с autoincrement, но назови его по другому, например key_id_orig
1+key_id_orig-min(key_id_orig)

но это сработает только если удаление возможно только самой старой записи, если же будут удаления из середины, то порядок придется пересчитывать по другому, через сортировку всей таблицы по key_id_orig и подсчету колонок функцией row_number

data: _.form.serialize(),

Поэтому в связи с этим вопрос, все ли хорошо будет в плане SEO если использовать NextJS для этих целей?

Если использовать SSR (который вы указали в тегах) или SSG, то по идее должно быть все хорошо.

Проект сам по себе по объему планируется большой.

И какой стэк со стороны бэка в качестве API посоветовали бы?

Тот, который хорошо знают разработчики (не важно, вы, или сторонние) и точка.

create table public.profiles (
  id uuid not null,
  username text default concat('Пользователь #', random()*100000),

  primary key (id)
);

Открываете мануал к материнке и внимательно ищете сведения о том, что куда подведено электрически, в каком количестве. Если в мануале не описано - то продолжаете упорно искать в интернетах, что куда подведено. Начните с блок-схемы чипсета.

В частности, самый верхний M.2 вам недоступен вовсе. Потому что i7 10700k - это 10 поколение, мануал однозначно упоминает что верхний M.2 работает только при установке CPU 11 поколения (потому что слот подведён на линии PCI-E самого CPU)
Средний M.2 отключит один из разъёмов SATA в случае использования SATA M.2. Для NVME диска нет примечаний, до 4 линий от чипсета.
Нижний M.2 отключит два разъёма SATA при установке любого SSD в этот слот. Останутся ли у него 4 линии для PCI-E - не упомянуто, но скорей всего да.

У чипсета линий PCI-E более чем достаточно, аж 24 штуки. К чипсету подключены два M.2, один слот PCI-E x4, один слот x1, итого на всякую прочую мелочёвку остаётся ещё 11 линий.

учитывая количество линий на чипсете, я могу установить 1 видеокарту в режиме x16

Верхний PCI-E подключен к CPU, а не к чипсету.

Открыть документацию lodash, разобраться, что делают используемые в представленном коде методы, переписать код без их использования.

Как видите, всё довольно просто.

event.target

Самое главное не указал:
1. Для чего именно ты собираешь окружение? Для разработки или для прода?
2. Что такое "веб-ресурсы пользователей"?
3. Для чего тебе к этому подключаться по ssh и ftp? (для каждого нужно отдельное пояснение)
4. Что подразумевает под собой словосочетание "возможность работать с ..."?
5. Кто такие "пользователи"?

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

Если тебе всё-таки именно виртуальные машины нужны, то тогда и бери виртуальные машины и настраивай их при помощи ansible.

Если тебе нужны контейнеры, то бери k8s, но тогда уже придётся отказаться от 1,2 и частично 4 с 5, тк:
1. Контейнеры не должны иметь состояние. Так что сразу отлетает п2
2. Контейнеры должны быть изолированы, а по тому сразу отлетает п1 с доступом внутрь контейнеров
3. Обновление зависимостей (например базового образа) требует пересборки и перезапуска контейнера
4. Один контейнер - одно приложение. Не будет такого, что у тебя в одном контейнере будет всё что ты описал в п3 одновременно работать.
5. Никаких "папок" для пользователей не будет. Но у каждого пользователя-человека вполне может быть своя учётка для доступа в кластер, чтобы в нём создавать свои ресурсы. При этом на уровне учётки можно запретить одному пользователю доступ к ресурсам другого пользователя например.

Вариантики
1) Сложный, надо понимать что и как ты делаешь. Своя АТС+GSM шлюз, приложение на телефон.
2) Запросить у своего оператора возможно отдать номер по SIP, поставить приложение на телефон.
3) Отнести симку оператору который поставит ее в свой шлюз и отдаст по SIP, поставить приложение на телефон.
4) Самый удобный и не требующий особых навыков. Поищи на ali устройство по ключевому слову SIMBOX

В документации всего один абзац посвящён этой возможности:

You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if MyComponents.DatePicker is a component, you can use it directly from JSX with:

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

Вроде бы всё просто: если модуль экспортирует много компонентов, как вариант, удобно использовать запись через точку, чтобы не писать длиннющий импорт.

Интересует мнение

Собирать мнения и проводить опросы тут нельзя. Правила. Лучше задавать вопрос, на который можно дать однозначный проверяемый воспроизводимый ответ.