Next.js-ի ինտերֆեյսի օրինակի գործարկում

Ֆոլդերում /frontend-examples/articles-with-tags-filter կարող եք գտնել Next.js հավելված, որը օգտագործում է JSON Drop API-ն։

Համառոտ նկարագիր

Սա Next.js հավելված է, որը ցուցադրում է ինտեգրում JSON Drop API-ի հետ՝ հոդվածների և թեգերի ֆիլտրման ֆունկցիոնալությամբ։

Պահանջվող նախապայմաններ

• Node.js (հավասար կամ բարձր 18 տարբերակից)
• npm կամ pnpm փաթեթների կառավարիչ
• Մուտք JSON Drop API-ի օրինակին

Տեղադրում

1. Տվյալների պահոցը (repository) կլոնավորեք
2. Տեղադրեք կախվածությունները՝

   npm install
   # կամ
   pnpm install

3. Կոնֆիգուրացրեք միջավայրի փոփոխականները՝
   • Ստեղծեք .env ֆայլ արմատային թղթապանակում
   • Սահմանեք հետևյալ փոփոխականը՝

     NEXT_PUBLIC_DRUPAL_BASE_URL="http://your-jsonapi-instance"

Հավելվածի գործարկում

Զարգացման սերվերը սկսելու համար՝

npm run dev
# կամ
pnpm dev

Հավելվածը հասանելի կլինի հետևյալ հասցեով՝ http://localhost:3000

Հասանելի ուղիներ (Routes)

• / - Գլխավոր էջ՝ հոդվածների ցուցակով և թեգերով ֆիլտրման հնարավորությամբ
• /articles - Հոդվածների ցուցակի էջ
• /form - Հոդվածների ստեղծման/խմբագրման ձևի էջ

Կոնֆիգուրացիա

Միջավայրի փոփոխականներ

• NEXT_PUBLIC_DRUPAL_BASE_URL - Ձեր JSON Drop API-ի բազային URL-ը

Կախվածություններ

Հավելվածը օգտագործում է մի քանի հիմնական կախվածություն՝

• Next.js 15.1.0
• React 19
• Axios API կանչերի համար
• TailwindCSS ձևավորման համար
• Radix UI կոմպոնենտներ
• React Hook Form ձևերի կառավարում

Հաճախ հանդիպող խնդիրներ

Արտադրման համար կառուցում (Production Build)

Արտադրման կառուցում կատարելու համար՝

npm run build
# կամ
pnpm build

Արտադրման սերվերը գործարկելու համար՝

npm run start
# կամ
pnpm start

Աջակցություն

Խնդիրների կամ հարցերի դեպքում, խնդրում ենք դիտել նախագծի փաստաթղթերը կամ բացել խնդիր (issue) տվյալ պահոցում։