Будешь ли использовать Next.js в B2B проекте

Next.js в B2B проекте

Ответ: Да, используют Next.js для B2B проектов, но с осторожностью. Это зависит от требований.

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

Когда Next.js хорош для B2B

1. Быстрая разработка дашбордов

Для внутренних систем и админ-панелей:

// Быстро создать страницу со своим SSR
// pages/dashboard/[companyId].tsx
import { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { companyId } = context.params!;
  const company = await fetchCompanyData(companyId);
  
  return {
    props: { company },
    revalidate: 3600 // ISR: перебилдить каждый час
  };
};

export default function Dashboard({ company }) {
  return <div>Company: {company.name}</div>;
}

2. SEO для B2B маркетинга

Если нужны landing pages с хорошим SEO (для привлечения клиентов):

// SSG с ISR для постоянно обновляемого контента
export const getStaticProps = async () => {
  const posts = await fetchBlogPosts();
  return {
    props: { posts },
    revalidate: 3600 // Перебилдить каждый час
  };
};

export const getStaticPaths = async () => {
  const companies = await fetchCompanies();
  return {
    paths: companies.map(c => ({ params: { slug: c.slug } })),
    fallback: 'blocking' // Новые компании генерируются on-demand
  };
};

3. Гибридный подход: SSR + SPA

Сочетание серверного рендера и клиентского ООО:

// app/dashboard/page.tsx (SSR)
export default function DashboardLayout({ children }) {
  return (
    <DashboardProvider>
      <Header />
      {children}
      <Sidebar />
    </DashboardProvider>
  );
}

// app/dashboard/analytics/page.tsx (SPA часть)
// Загружается с серверным состоянием, потом работает как SPA
'use client';

import { useEffect, useState } from 'react';

export default function AnalyticsDashboard() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    // Загрузить данные как SPA
    fetchAnalytics().then(setData);
  }, []);

  return <AnalyticsChart data={data} />;
}

Когда Next.js НЕ подходит

1. Внутренний инструмент для инженеров

Если нужна просто fast SPA без SEO требований:

// React SPA (Vite, Create React App) проще:
// - Быстрее разработка
// - Меньше конфигурации
// - Проще деплой на фронтенд хостинг

// Вместо Next.js:
const Dashboard = () => {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/dashboard')
      .then(r => r.json())
      .then(setData);
  }, []);

  return <div>{data}</div>;
};

2. Сложная логика с множеством API интеграций

Чем больше интеграций, тем сложнее SSR:

// Проблема: SSR на каждый запрос вызывает множество API
export const getServerSideProps = async () => {
  // Это может быть медленно на высоком трафике
  const users = await api.getUsers();
  const analytics = await api.getAnalytics();
  const reports = await api.getReports();
  const notifications = await api.getNotifications();
  // Все параллельно, но может быть медленно
  
  return { props: { users, analytics, reports, notifications } };
};

// Вместо этого - использовать SPA + React Query:
const { data: users } = useQuery(['users'], () => fetch('/api/users'));
const { data: analytics } = useQuery(['analytics'], () => fetch('/api/analytics'));
// Параллельная загрузка, кеширование, стейл while revalidate

Выбор: App Router vs Pages Router

App Router (новое, рекомендуется):

// app/dashboard/page.tsx
export default async function Dashboard() {
  // Серверный компонент по умолчанию
  const data = await fetch('...');
  return <div>{data}</div>;
}

Преимущества:

• Более интуитивная структура
• Server Components по умолчанию
• Лучше для B2B приложений

Pages Router (старое, но работает):

// pages/dashboard.tsx
export const getServerSideProps = async () => {
  const data = await fetch('...');
  return { props: { data } };
};

export default function Dashboard({ data }) {
  return <div>{data}</div>;
}

Типичная B2B архитектура с Next.js

Frontend (Next.js на Dokku)
├── pages/
│   ├── login.tsx (SSR)
│   ├── dashboard/
│   │   ├── index.tsx (SSR + ISR)
│   │   └── [companyId]/
│   │       └── index.tsx (SSR)
│   └── api/
│       └── (proxy endpoints для CORS обхода)
├── components/
│   ├── DashboardLayout.tsx
│   └── Charts.tsx
├── lib/
│   └── api.ts (axios или fetch with retry)
└── middleware.ts (auth checks)

Backend (FastAPI на сервере)
├── /api/v1/users
├── /api/v1/companies
├── /api/v1/analytics
└── /auth (JWT/session management)

Конфигурация Next.js для B2B

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Production подойдет на Dokku
  output: 'standalone',
  
  // Компрессия для B2B приложений
  compress: true,
  
  // Нет экспортов (ISR нужен для B2B дашбордов)
  // export: false,
  
  // Для Dokku важно
  basePath: '',
  
  // Оптимизация изображений
  images: {
    unoptimized: process.env.NODE_ENV === 'production',
  },
  
  // Типизация
  typescript: {
    ignoreBuildErrors: false,
  },
  
  // Лучше сделать на сервере
  rewrites: async () => ({
    beforeFiles: [],
    afterFiles: [
      {
        source: '/api/:path*',
        destination: 'http://backend:8000/api/:path*',
      },
    ],
  }),
};

module.exports = nextConfig;

Альтернативы Next.js для B2B

Мой выбор для B2B в 2025

Для стартапов B2B: Vite + React SPA

• Быстрая разработка
• Не нужна SEO (B2B не гуглится как B2C)
• Меньше инфраструктуры

Для etablished B2B: Next.js с App Router

• Гибридный подход (SSR + SPA)
• Масштабируемость
• Хорош для админ-панелей и внутренних систем

Для B2B SaaS платформ: Remix или специализированный фреймворк

• Лучше для сложной логики форм
• Лучше для real-time колаборативных функций

Заключение

Next.js хорош для B2B если:

1. Нужна маркетинговая часть (landing page с SEO)
2. Есть админ-панель, дашборды
3. Нужна гибкость между SSR и SPA
4. Команда знает React

Next.js не нужен если:

1. Это просто внутренний инструмент
2. Нет требований к SEO
3. Хочется максимальной простоты

В 99% случаев B2B приложения работают отлично на Next.js, если правильно настроить кеширование и API интеграции.