Next.js кіріспе нұсқаулығы: заманауи веб-қосымшаларды құрудың ең жақсы таңдауы

Кіріспе

Бүгінгі таңда жылдам дамып келе жатқан фронт-энд әзірлеу саласында Next.js - әзірлеушілерге жоғары өнімді, заманауи веб-қосымшаларды құру үшін қуатты құралдар мен икемділікті ұсынатын танымал фреймворк. Сіз жаңадан бастаушы болсаңыз да, немесе бар жобаларыңызға Next.js енгізгіңіз келсе, бұл мақала сізге Next.js-тің негізгі концепциялары мен қолдану әдістерін түсінуге көмектесетін толық кіріспе нұсқаулығын ұсынады.

Next.js дегеніміз не?

Next.js - әзірлеушілерге өндірістік дайын қосымшаларды жылдам құруға көмектесетін React фреймворкы. Ол көптеген қуатты мүмкіндіктерді ұсынады, мысалы:

Сервер жағындағы рендеринг (SSR) және статикалық генерация (SSG): серверде беттерді алдын ала рендерлеуді қолдайды, жүктеу жылдамдығын және SEO өнімділігін арттырады.
Маршруттау: беттер мен API маршруттарын басқаруды жеңілдететін кірістірілген файлдық жүйе маршрутизациясы.
API маршруттары: бір жоба ішінде API-ді оңай құруға мүмкіндік береді, қосымша сервер қажет емес.
Өнімділікті оңтайландыру: автоматты код бөлшектеу, бастапқы жүктеу уақытын азайтады.

Next.js-ті орнату

Next.js-ті орнату өте оңай, тек сіздің әзірлеу ортаңызда Node.js орнатылғанын тексеруіңіз керек. Жаңа жобаны жылдам жасау үшін келесі команданы пайдаланыңыз:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Жоғарыдағы команданы іске қосқаннан кейін, сіз http://localhost:3000 адресінде жаңа Next.js қосымшасының іске қосылғанын көресіз.

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

Next.js қосымшасын жасағаннан кейін, сіз стандартты каталог құрылымын көресіз:

my-next-app/
├── node_modules/
├── public/
├── src/
│   ├── pages/
│   ├── styles/
│   └── components/
├── package.json
└── next.config.js

pages/: беттерді сақтайтын каталог, әрбір .js файлы автоматты түрде маршрутқа сәйкес келеді.
public/: статикалық файлдар каталогы, осы каталогқа орналастырылған кез келген файлға тікелей қол жеткізуге болады.
styles/: CSS файлдарын сақтайтын каталог, глобалдық немесе нақты компоненттер үшін стильдер үшін пайдаланылуы мүмкін.

Беттер мен маршруттар жасау

Next.js-тің беттері файлдық жүйе негізінде маршрутты басқаруды жүзеге асырады. pages/ каталогында about.js сияқты файл жасаңыз, мазмұны төмендегідей:

export default function About() {
  return 

# Біз туралы

;
}

Бұл автоматты түрде /about маршрутына осы бетті қол жеткізуге мүмкіндік береді.

Статикалық генерация мен сервер жағындағы рендеринг

Next.js деректерді алу стратегиясына сәйкес статикалық генерация (Static Generation) және сервер жағындағы рендеринг (Server-side Rendering) қолдайды. Қалай жүзеге асыруға болатынын қарастырайық:

Статикалық генерация (Static Generation)

Жобаны құру кезінде мазмұнды алдын ала генерациялау үшін getStaticProps функциясын пайдалануға болады. Мысалы:

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  return {
    props: {
      data: json,
    },
  };
}

export default function Page({ data }) {
  return {data.title};
}

Сервер жағындағы рендеринг (Server-side Rendering)

Егер сіз әр сұрау кезінде деректерді алғыңыз келсе, getServerSideProps функциясын пайдалануға болады:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default function Page({ data }) {
  return {data.title};
}

CSS және стильдер қосу

Next.js CSS стильдерін қосу үшін бірнеше тәсілді ұсынады, ең қарапайымы - styles/ каталогында CSS файлын жасап, қажет беттерде импорттау:

import styles from './styles/Home.module.css';

export default function Home() {
  return 

# Next.js-ке қош келдіңіз!

;
}

Сонымен қатар, сіз стильдерді өңдеу үшін styled-components немесе Emotion сияқты CSS-in-JS кітапханаларын да пайдалана аласыз.

API маршруттары

Сіз pages/api/ каталогында API маршруттарын жасай аласыз. Мысалы, hello.js файлын жасаңыз:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello API' });
}

API маршруттары сұраулар мен жауаптарды өңдей алады, алдыңғы жағында динамикалық деректерді өңдеу мүмкіндігін береді.

Next.js қосымшасын орналастыру

Ең қарапайым орналастыру тәсілі - Vercel пайдалану, бұл Next.js әзірлеуші командасы жасаған тегін хостинг платформасы. Кодты GitHub-қа жүктеп, Vercel-ге GitHub аккаунтыңызды қосу арқылы автоматты түрде құру және орналастыруды жүзеге асыра аласыз.

Қорытынды

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

Сұрақтарыңыз немесе қосымша оқу ресурстарына қажеттіліктеріңіз болса, Next.js-тің ресми құжаттамасын қарауды ұмытпаңыз.