Перейти к основному содержимому

Первая программа на Next.js

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику Архитектору
Загрузка симулятора первой программы…

Первая программа на Next.js​

Создадим приложение с главной страницей, страницей «О проекте» и API /api/hello.

Обзор: Next.js. База React: Первая программа на React.

Создание проекта​

npx create-next-app@latest my-next-app

Рекомендуемые ответы мастера для обучения:

  • TypeScript — Yes (можно No, если пока без TS)
  • ESLint — Yes
  • App Router — Yes
  • src/ directory — по желанию
  • Tailwind — Yes (удобно для вёрстки)
cd my-next-app
npm run dev

Откройте http://localhost:3000.

Layout и главная страница​

app/layout.tsx:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Моё Next-приложение',
  description: 'Первая программа на Next.js',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ru">
      <body style={{ fontFamily: 'system-ui', margin: '2rem' }}>
        <header>
          <nav>
            <a href="/" style={{ marginRight: '1rem' }}>Главная</a>
            <a href="/about">О проекте</a>
          </nav>
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

app/page.tsx:

export default function HomePage() {
  return (
    <section>
      <h1>Привет, Next.js</h1>
      <p>Эта страница — Server Component по умолчанию.</p>
    </section>
  );
}

Вторая страница​

app/about/page.tsx:

export default function AboutPage() {
  return (
    <section>
      <h1>О проекте</h1>
      <p>Маршрут создан файлом app/about/page.tsx</p>
    </section>
  );
}

API Route​

app/api/hello/route.ts:

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from Next API' });
}

Проверка: http://localhost:3000/api/hello.

Client Component с состоянием​

Интерактивность — только в клиентском компоненте.

app/counter/page.tsx:

'use client';

import { useState } from 'react';

export default function CounterPage() {
  const [count, setCount] = useState(0);
  return (
    <section>
      <h1>Счётчик: {count}</h1>
      <button type="button" onClick={() => setCount((c) => c + 1)}>
        +1
      </button>
    </section>
  );
}

Директива 'use client' в начале файла обязательна для хуков.

Сборка и production​

npm run build
npm start

build генерирует оптимизированный серверный бандл и статику.

Дальше​

  • Загрузка данных в Server Component: async function Page() { const data = await fetch(...) }.
  • Динамические сегменты: app/blog/[slug]/page.tsx.
  • Деплой на Vercel или Docker с node server.js.

См. также

Другие статьи этого же раздела в боковом меню (как на странице «О разделе»).

Ещё 35 статей в разделе

Освоение главы0%