Next.js-ті жұмысымда қалай қолданамын

2026-09-10

Next.js — веб-өнімдер үшін әдепкі таңдауым, бірақ сәнге ергеннен емес. Бір TypeScript код базасы бұрын үш жоба қажет еткен міндетті атқарады: іздеу жүйесінде көрінуі тиіс маркетинг сайты, жүйеге кіргеннен кейін ашылатын қолданба және екеуін жалғайтын шағын API қабаты. Бұл сайт — шағын мысал: тілге бейімделген маршруттар, автоматты жасалған метадеректер, sitemap, Open Graph суреттері мен llms.txt маршруты — бәрі бір App Router жобасында.

Жұмысты серверден бастаймын. Беттер мен layout-тар әдепкіде Server Components болады: деректерді базаға жақын жерден алады, JavaScript bundle орнына HTML жібереді және құпияларды серверде сақтайды. «use client» директивасын күй, эффект немесе браузер API-і керек ағаштың жапырақ бөлігіне ғана қоямын — формаға, ашылмалы мәзірге не картаға. Бүкіл ағаштың ең басына «use client» қойылса, әдетте үлкен bundle мен қателердің тұтас бір тобы қатар пайда болады.

Рендерлеу режимін таңдау — техникалық талғам емес, өнімдік шешім. Деплой кезінде ғана өзгеретін беттерге статикалық генерация. Күн ішінде жаңаратын каталогтар, тізімдер және блогтарға ISR не тегке негізделген қайта тексеру: ешкім түсінбейтін таймердің орнына жазбадан кейін revalidateTag шақыру. Дашборд пен жеке дерекке Suspense streaming бар динамикалық рендерлеу: алдымен қаңқасы көрсетіліп, баяу дерек кейін келеді. Әр маршруттың неліктен статикалық не динамикалық екенін жазып қоямын; осы бір жол «баға неге ескі?» деген сұраққа кететін бір аптаны үнемдейді.

Өзгерістер үшін бетке тиесілі формаларда Server Actions, ал қолданбаға сыртқы жүйе қоңырау шалса Route Handlers қолданамын: төлем провайдері не Telegram вебхугі, мобильді клиент немесе cron тапсырмасы. Екі жағдайда да енгізілген деректерді серверде Zod тексереді, аутентификация сонда тексеріледі; клиент ақша мен рұқсат туралы шешім қабылдамайды. Ірі өнімдерде Next.js фронтенд пен BFF болып қалады, ал негізгі домен өз базасы бар NestJS не Node.js сервисінде орналасады.

Өнімділік пен SEO — дайындықтың анықтамасына кіреді. Нақты өлшемдермен next/image, орналасу секірісін азайту үшін next/font, әр ашық бетте generateMetadata пен құрылымды деректер, ауыр виджеттерге динамикалық импорт қолданамын. Core Web Vitals көрсеткіштерін MacBook-та емес, орта деңгейлі телефонда тексеремін. Команда операциялық жұмысты қаламаса Vercel-ге, ал құн, деректің қайда сақталуы немесе ұзақ тапсырмалар маңызды болса, AWS не VPS-та Docker ішіндегі standalone build-ке орналастырамын.

Түбірлік layout-та «use client» қолданудан, кэшті ойламай бір деректі бес компонентте сұраудан, бизнес логикасын middleware ішінде жасырудан және codemod-тарды оқымай жұма күні major нұсқаға өтуден бас тартамын. Next.js қолданбаңыз баяу не осал болса, репозиторий мен ең баяу екі бетті жіберіңіз. Нені серверге көшіретінімді, нені кэшке салатынымды, нені алып тастайтынымды айтамын.

Келесі өнімге онымен бірге қалатын адамды беріңіз.

Бастауға дайынсыз ба? Маған жазыңыз — қазір бастап, әрі қарай қалуға дайынмын. Екі апталық тапсыру емес, ұзақ мерзімді келісімдер. Жобаңызды, талаптарды және алға жылжудың ең тиімді жолын талқылайық.

Тәжірибе немесе қызметтер туралы сұраңыз