hello,Всем привет,ЯСюй Сяоси。Дои Все поделились многимВизуализация,нулевой кодиПредварительный инжиниринглучшие практики,Сегодня я продолжу рассказывать о недавнем Открытом исходный код Next-Admin Последние обновления проекта.

Это обновление версии 1.0, наконец, обновление,Мы также внесли некоторые оптимизации на основе отзывов пользователей.,например:

• Модуль оркестровки процессов
• Интегрированная онлайн-таблица
• сохранение Вализация строительного модуля (перетаскиванием,опорная линия,Адсорбция,Функция множественного выбора и т. д.)
• Поддержка каскадного списка потоков
• Модуль вопросов и ответов AI
• Поддержка базовой аутентификации входа в систему JWT.

Конечно, есть и некоторые потребности, поднятые пользователями, такие как:

• Поддержка аутентификации маршрутизации
• Поддержка Более полная Предварительная версия конструкции компонента
• Поддержка отправки сервера SSE
• Поддержка доступа к большой модели
• поддерживать Визуализация Большой экранный модуль

Конечно, я реализую это в версии 2.0. Если вам интересно, вы можете продолжить внимание.

• Открытый исходный кодадрес：https://github.com/MrXujiang/next-admin
• онлайнdemo：http://next-admin.com

Что такое Next-Admin

Сначала разработайте Next-Admin Промежуточные и серверные системы созданы исключительно потому, что я хочу их изучать и исследовать. nextjs, В то же время, чтобы более глубоко использовать его в реальном бизнесе, я начал работать над этим произведением «Открытый». исходный код,И надеемся, что этот проект объединит больше качественных решений в отрасли.,захотеть учитьсяnextjsили правильно Визуализация Существует проект, к которому могут обратиться друзья, интересующиеся строительством.。

Далее я дам вам подробное представление Next-Admin Что там есть и что с этим делать.

1. Шаблон управления мидлом и бэкендом на основе nextjs + antd5.0.

Если вы хотите изучить или использоватьnextjsСоздайте его с нуля За кулисами, этот проект будет очень хорошим выбором. Я реализовал подключение от фронтенда к бэкенду с нуля, а также весь процесс онлайн-развертывания, а также обеспечил поддержку. pm2 Файлы развертывания эксплуатации и обслуживания, на их основе можно напрямую вносить вторичные изменения.

// pm2 Файлы развертывания
const argEnvIndex = process.argv.indexOf('--env')
let argEnv = (argEnvIndex !== -1 && process.argv[argEnvIndex + 1]) || ''

const RUN_ENV_MAP = {
  local: {
    instances: 2,
    max_memory_restart: '250M'
  },
  dev: {
    instances: 2,
    max_memory_restart: '250M'
  },
  prod: {
    instances: 4,
    max_memory_restart: '1000M'
  }
}

if (!(argEnv in RUN_ENV_MAP)) {
  argEnv = 'prod'
}

module.exports = {
  apps: [
    {
      name: 'next-admin',
      script: 'node_modules/next/dist/bin/next',
      args: 'start -p 80',
      instances: RUN_ENV_MAP[argEnv].instances,
      exec_mode: 'cluster',
      watch: false,
      max_memory_restart: RUN_ENV_MAP[argEnv].max_memory_restart,
      env_local: {
        APP_ENV: 'local'
      },
      env_dev: {
        APP_ENV: 'dev'
      },
      env_prod: {
        APP_ENV: 'prod'
      }
    }
  ]
}

При этом страница входа и регистрации тоже встроена, и вы можете модифицировать ее непосредственно на этой основе:

2. Готовое решение для интернационализации

После многих попыток на основеnextjsпредоставил Открытый исходный код После программы интернационализации,Я наконец выбралnext-intl. С точки зрения гибкости кода и стартовой стоимости,next-intl Полное удовлетворение большинства сценариев международного спроса,Хотя есть некоторые подводные камни в использовании,Но все это прекрасно решено,я написал вNext-Admin Полная конфигурация интернационализации имеет открытый исходный код, и каждый может ее использовать.

3. Встроенный модуль визуальной оркестровки процессов.

Оркестровка процессов очень полезна в продуктах с нулевым кодом и с низким кодом, которые в последнее время очень популярны, над которыми я недавно работал. H5-Нулевой код Дороинга Также считается, что для реализации оркестрации бизнес-процессов можно использовать следующее.

Разумеется, для планирования процессов используется Alibaba Открытый. исходный кодbutterfly-dag, Стоимость начала работы невелика, но документация немного раздражает. Заинтересованные друзья могут изучить ее и обратиться к ней.

4. Встроенная онлайн-таблица.

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

В настоящее время моя реализация перетаскивания поддерживает множественный выбор компонентов, опорные линии, адсорбцию компонентов, несколько методов выравнивания и т. д., что очень важно~

Нуждающиеся друзья могут использовать его напрямую.

6. Встроенный модуль вопросов и ответов AI.

В настоящее время предоставляется модуль вопросов и ответов AI. Вы можете легко интегрировать собственный интерфейс AI для реализации функции вопросов и ответов AI без написания компонента чата с нуля.

7. Встроенный водопадный список потоков.

8. Встроенный базовый модуль аутентификации JWT.

import { NextResponse } from 'next/server'
import jsonwebtoken from 'jsonwebtoken'
import { encrypt } from '@/utils/auth'
import { cookies } from 'next/headers'


export async function POST(
    request: Request,
    { params: { auth } }: { params: { auth: string } }
  ) {
    const { email, pwd } = await request.json();

    // Зашифрованный пароль зашифрованного текста рекомендуется шифровать во время передачи на внешней стороне и расшифровывать на внутренней стороне.
    const en_pwd = encrypt(pwd);

     // Хранить информацию о пользователе
     let info = {
      email,
      // Другие ключи шифрования
      role: 1
    }

    const token = jsonwebtoken.sign(
        info,
        process.env.JWT_SECRET || '',
        { expiresIn: '3d' }
    );
    
    // Установить срок действия токена
    const oneDay = 3 * 24 * 60 * 60 * 1000;
    // Установите токен в сессию, и нет необходимости вручную задавать параметры токена в запросе.
    cookies().set('token', token, { httpOnly: true, expires: Date.now() + oneDay })

    if(auth === 'login') {
      return NextResponse.json({data: { email, pwd: en_pwd }, msg: 'Вход успешен'})
    }

    if(auth === 'register') {
      return NextResponse.json({data: { email, pwd: en_pwd }, msg: 'Регистрация прошла успешно'})
    }
    
}

Если вы не делаете фуллстек, вам не нужно обращать на это внимание. Однако друзья, не знакомые с JWT, могут обратиться к нему. Реальная настройка предприятия будет сложнее.

9. Интеграция большего количества лучших практик в версию 2.0.

Мы продолжим работу над версией 2.0 в будущем. Если у вас есть хорошие предложения и идеи, вы также можете оставить отзыв в области комментариев~.

Изменения, внесенные выпуском Nextjs 15.0

недавно видел nextjs команда Опубликовано 15.0 версия, которая содержит следующие обновления:

• Совершенно новый компилятор：Next.js 15 представляет современную React компилятор, который глубоко понимает React Код, обеспечивающий такие оптимизации, как автоматическое запоминание, в большинстве случаев больше не нужно использовать вручную. useMemo и useCallback。это экономит время、Предотвратить ошибки、Ускорьте это.
• Поддержка Реагирования 19：Next.js 15 Поддержка Реагирования 19. Представленная клиентская и серверная часть Действия и улучшенная обработка ошибок гидратации.
• Новое поведение кэширования：существовать Next.js 15 , больше не кэшируется автоматически fetch() Запрос, обработчики маршрутов (например. GET、POST и т. д.)и <Link> Клиентская навигация. Если кэширование необходимо fetch() Запросы можно сделать по адресу next.config.js Настроить в.
• Новый способ разделения задач：Next.js 15 представил next/after,Это новый способ разделения проблемы.

Если вы хотите узнать больше о Next.js версии 15.0, вы можете ознакомиться с официальной документацией Next.js.

Эй, пришло время учиться снова.

наконец

Приглашаем всех строить вместе.

• Открытый исходный кодадрес：https://github.com/MrXujiang/next-admin
• онлайнdemo：http://next-admin.com