Next.js-те жылдам сайт қалай құруға болады: толық нұсқаулық

Next.js — заманауи веб-қосымшалар құру үшін ең танымал фреймворктардың бірі. Бұл мақалада Next.js-те нөлден жылдам, SEO-оңтайландырылған сайт қалай құруға болатынын көрсетемін.

Неге Next.js?

Next.js көптеген артықшылықтар береді:

• Server-Side Rendering (SSR) — SEO мен бірінші жүктеу уақытын жақсартады
• Static Site Generation (SSG) — максималды өнімділік үшін
• Автоматты оңтайландыру — суреттер, қаріптер, код
• Кірістірілген роутинг — файлдық жүйе маршрутизация ретінде
• API Routes — жеке серверсіз backend құру

Жұмысты бастау

Орнату

Копировать
1npx create-next-app@latest my-website --typescript --tailwind --app
2cd my-website

Жоба құрылымы

src/
├── app/
│   ├── layout.tsx      # Түбірлік layout
│   ├── page.tsx         # Басты бет
│   ├── about/
│   │   └── page.tsx     # "Біз туралы" беті
│   └── api/
│       └── route.ts     # API endpoints
├── components/          # React компоненттері
├── lib/                 # Утилиттер
└── public/              # Статикалық файлдар

Өнімділікті оңтайландыру

1. Image компонентін қолдану

Next.js суреттерді автоматты түрде оңтайландырады:

Копировать
1import Image from 'next/image';
2
3export default function Hero() {
4  return (
5    <Image
6      src="/hero.jpg"
7      alt="Hero image"
8      width={1200}
9      height={600}
10      priority
11      placeholder="blur"
12    />
13  );
14}

2. Code Splitting

Кодты бөлу үшін динамикалық импорттар:

Копировать
1import dynamic from 'next/dynamic';
2
3const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
4  loading: () => <div>Жүктелуде...</div>,
5  ssr: false,
6});

3. Статикалық беттер үшін Static Generation

Копировать
1export async function generateStaticParams() {
2  return [
3    { slug: 'post-1' },
4    { slug: 'post-2' },
5  ];
6}
7
8export default async function Post({ params }: { params: { slug: string } }) {
9  const post = await getPost(params.slug);
10  return <article>{post.content}</article>;
11}

SEO оңтайландыру

Мета-тегтер

Копировать
1import type { Metadata } from 'next';
2
3export const metadata: Metadata = {
4  title: 'Менің сайтым | Басты',
5  description: 'Іздеу жүйелері үшін сайт сипаттамасы',
6  openGraph: {
7    title: 'Менің сайтым',
8    description: 'Сипаттама',
9    images: ['/og-image.jpg'],
10  },
11};

Құрылымдалған деректер

Копировать
1export default function HomePage() {
2  const jsonLd = {
3    '@context': 'https://schema.org',
4    '@type': 'WebSite',
5    name: 'Менің сайтым',
6    url: 'https://mysite.com',
7  };
8
9  return (
10    <>
11      <script
12        type="application/ld+json"
13        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
14      />
15      {/* Контент */}
16    </>
17  );
18}

Production-ға деплой

Vercel (ұсынылады)

Копировать
1npm i -g vercel
2vercel

Vercel Next.js қосымшаларын автоматты түрде оңтайландырады және ұсынады:

• Статикалық файлдар үшін CDN
• Автоматты SSL
• Preview deployments
• Analytics

Қорытынды

Next.js — жылдам, SEO-оңтайландырылған сайттар құру үшін қуатты құрал. Осы тәжірибелерді ұстансаңыз, жылдам жүктелетін және іздеу жүйелерінде жақсы рейтингте болатын сайт құрасыз.

Негізгі нүктелер:

• Статикалық контент үшін SSG қолданыңыз
• Image компоненті арқылы суреттерді оңтайландырыңыз
• Дұрыс мета-тегтерді баптаңыз
• Құрылымдалған деректерді қосыңыз
• Үлкен компоненттер үшін code splitting қолданыңыз