Next.js vs Vite: выбор инструментов для React-проектов

1// app/page.tsx — главная страница
2export default function Home() {
3  return <h1>Привет мир</h1>;
4}
5
6// app/about/page.tsx — страница /about
7export default function About() {
8  return <h1>О нас</h1>;
9}

1// Компонент по умолчанию — серверный
2async function Products() {
3  const products = await fetch('https://api.example.com/products');
4  const data = await products.json();
5  return (
6    <ul>
7      {data.map(p => <li key={p.id}>{p.name}</li>)}
8    </ul>
9  );
10}

1// app/api/users/route.ts
2import { NextResponse } from 'next/server';
3
4export async function GET() {
5  const users = await db.user.findMany();
6  return NextResponse.json(users);
7}

1npm create vite@latest my-app -- --template react-ts
2cd my-app
3npm install
4npm run dev

1import { defineConfig } from 'vite';
2import react from '@vitejs/plugin-react';
3
4export default defineConfig({
5  plugins: [react()],
6  resolve: {
7    alias: {
8      '@': '/src',
9    },
10  },
11  server: {
12    port: 3000,
13  },
14});

1// SSR — страница генерируется при каждом запросе
2export async function getServerSideProps() {
3  const data = await fetchData();
4  return { props: { data } };
5}
6
7// SSG — страница генерируется при сборке
8export async function getStaticProps() {
9  const data = await fetchData();
10  return { props: { data }, revalidate: 60 };
11}

1// vite.config.ts
2export default defineConfig({
3  build: {
4    ssr: true,
5  },
6});

1// vite + react-router
2import { BrowserRouter, Routes, Route } from 'react-router-dom';
3
4function App() {
5  return (
6    <BrowserRouter>
7      <Routes>
8        <Route path="/" element={<Home />} />
9        <Route path="/about" element={<About />} />
10      </Routes>
11    </BrowserRouter>
12  );
13}