{"id":88709,"date":"2024-12-18T00:31:45","date_gmt":"2024-12-17T21:01:45","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/crypto-news-aggregator-using-typescript-nextjs-newsdatahub-and-coingecko-apis-197b\/"},"modified":"2024-12-18T00:31:45","modified_gmt":"2024-12-17T21:01:45","slug":"crypto-news-aggregator-using-typescript-nextjs-newsdatahub-and-coingecko-apis-197b","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/crypto-news-aggregator-using-typescript-nextjs-newsdatahub-and-coingecko-apis-197b\/","title":{"rendered":"Crypto News Aggregator \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Typescript\u060c Next.js\u060c NewsDataHub \u0648 API\u0647\u0627\u06cc CoinGecko"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u062f\u0647 \u0627\u0645\u0627 \u0645\u0641\u06cc\u062f \u0628\u0631\u0627\u06cc \u062c\u0645\u0639\u200c\u0622\u0648\u0631\u06cc \u0627\u062e\u0628\u0627\u0631 \u0627\u0631\u0632\u0647\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0628\u0633\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u0627\u0632 NewsDataHub \u0648 API\u0647\u0627\u06cc CoinGecko \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u062f\u0641 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0633\u0637\u062d \u0645\u0628\u062a\u062f\u06cc \u0627\u0633\u062a – \u0627\u06af\u0631 \u0641\u06a9\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0647\u0631 \u0628\u062e\u0634 \u0627\u0631\u0632\u0634\u06cc \u0628\u0647 \u062a\u062c\u0631\u0628\u0647 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0634\u0645\u0627 \u0646\u0645\u06cc\u200c\u0627\u0641\u0632\u0627\u06cc\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0646 \u0635\u0631\u0641\u0646\u0638\u0631 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u06a9\u062f \u0646\u0647\u0627\u06cc\u06cc \u067e\u0631\u0648\u0698\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u062a: https:\/\/github.com\/newsdatahub\/crypto-news-aggregator<\/p>\n

\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0646\u0633\u062e\u0647 \u062a\u0648\u0644\u06cc\u062f\u06cc \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0642\u06cc\u0642\u0627\u064b \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u062a: https:\/\/newsdatahub.com\/crypto<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Next.js \u062c\u062f\u06cc\u062f \u0628\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc Typescript \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.<\/p>\n

npx create-next-app@latest crypto-news-aggregator –typescript<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0648\u0642\u062a\u06cc \u0627\u0632 \u0634\u0645\u0627 \u062e\u0648\u0627\u0633\u062a\u0647 \u0634\u062f\u060c \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n

\u0628\u0631\u0627\u06cc ESLint \u0628\u0644\u0647
\n\u0646\u0647 \u0628\u0631\u0627\u06cc Tailwind CSS (\u0645\u0627 \u0627\u0632 \u0645\u0627\u0698\u0648\u0644\u200c\u0647\u0627\u06cc CSS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f)
\n\u0646\u0647 \u0628\u0631\u0627\u06cc src\/ \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc
\n\u0628\u0631\u0627\u06cc App Router \u0628\u0644\u0647
\n\u0646\u0647 \u0628\u0631\u0627\u06cc \u062a\u0648\u0631\u0628\u0648\u067e\u06a9
\n\u0646\u0647 \u0628\u0631\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0631\u062f\u0646 \u0646\u0627\u0645 \u0645\u0633\u062a\u0639\u0627\u0631 \u0648\u0627\u0631\u062f\u0627\u062a (\u0645\u0627 \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u06cc\u0645)<\/p>\n

cd \u062f\u0631 \u067e\u0648\u0634\u0647 \u067e\u0631\u0648\u0698\u0647:<\/p>\n

cd crypto-news-aggregator<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647<\/p>\n

\u067e\u0633 \u0627\u0632 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. \u0645\u0646 \u0647\u062f\u0641 \u0647\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0648 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u062a\u0648\u0636\u06cc\u062d \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f.<\/p>\n

mkdir -p app\/components\/{news-feed,price-ticker} __tests__ types<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u0632\u06cc\u0631 \u0628\u0631\u0633\u06cc\u062f.<\/p>\n

crypto-news-aggregator\/
\n\u251c\u2500\u2500 __tests__\/ # Test files
\n\u2502 \u251c\u2500\u2500 Home.test.tsx
\n\u2502 \u251c\u2500\u2500 NewsCard.test.tsx
\n\u2502 \u2514\u2500\u2500 PriceTicker.test.tsx
\n\u251c\u2500\u2500 app\/ # Next.js app directory
\n\u2502 \u251c\u2500\u2500 components\/ # React components
\n\u2502 \u2502 \u251c\u2500\u2500 news-feed\/ # News-related components
\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 NewsCard.tsx
\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 index.ts
\n\u2502 \u2502 \u2514\u2500\u2500 price-ticker\/ # Price ticker components
\n\u2502 \u2502 \u251c\u2500\u2500 PriceTicker.tsx
\n\u2502 \u2502 \u2514\u2500\u2500 index.ts
\n\u2502 \u251c\u2500\u2500 layout.tsx # Root layout component
\n\u2502 \u251c\u2500\u2500 page.module.css # Styles for main page
\n\u2502 \u2514\u2500\u2500 page.tsx # Main page component
\n\u251c\u2500\u2500 public\/ # Static assets
\n\u251c\u2500\u2500 types\/ # TypeScript type definitions
\n\u2502 \u251c\u2500\u2500 cache.ts
\n\u2502 \u251c\u2500\u2500 crypto.ts
\n\u2502 \u251c\u2500\u2500 env.d.ts
\n\u2502 \u251c\u2500\u2500 index.ts
\n\u2502 \u2514\u2500\u2500 news.ts
\n\u251c\u2500\u2500 .env.example # Example environment variables
\n\u251c\u2500\u2500 .env.local # Environment variables (gitignored)
\n\u251c\u2500\u2500 .eslintrc.json # ESLint configuration
\n\u251c\u2500\u2500 .gitignore # Git ignore rules
\n\u251c\u2500\u2500 eslint.config.mjs # ESLint module configuration
\n\u251c\u2500\u2500 jest.config.mjs # Jest configuration
\n\u251c\u2500\u2500 jest.setup.js # Jest setup file
\n\u251c\u2500\u2500 next-env.d.ts # Next.js TypeScript declarations
\n\u251c\u2500\u2500 next.config.js # Next.js configuration
\n\u251c\u2500\u2500 package-lock.json # Locked dependency versions
\n\u251c\u2500\u2500 package.json # Project dependencies
\n\u251c\u2500\u2500 README.md
\n\u251c\u2500\u2500 tsconfig.json # TypeScript configuration
\n\u2514\u2500\u2500 types.d.ts # Global TypeScript declarations<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0645\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0647 \u0622\u0646\u062c\u0627 \u0628\u0631\u0633\u06cc\u0645\u060c \u0628\u0627\u06cc\u062f \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u06a9\u0645\u06cc \u062a\u0645\u06cc\u0632 \u06a9\u0646\u06cc\u0645 \u0648 \u0633\u067e\u0633 \u0686\u0646\u062f \u0641\u0627\u06cc\u0644 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u067e\u0627\u06a9 \u06a9\u0631\u062f<\/p>\n

app\/globals.css (\u0627\u06af\u0631 \u0627\u0632 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc module.css \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f)
\n\u0647\u0645\u0647 .svg \u0641\u0627\u06cc\u0644 \u0647\u0627 (\u062f\u0631 \/public \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc)
\nREADME.md (\u062d\u0630\u0641 \u06cc\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u060c \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0627\u0632 create-next-app \u0627\u0633\u062a)<\/p>\n

\u0627\u06af\u0631 favicon.ico \u0634\u0645\u0627 \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u060c \u0622\u0646 \u0631\u0627 \u0628\u0647 \u067e\u0648\u0634\u0647 \u0639\u0645\u0648\u0645\u06cc \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0641\u0627\u0648\u06cc\u06a9\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0647\u0631 \u062f\u0648 \u0645\u06a9\u0627\u0646 \u06a9\u0627\u0631 \u06a9\u0646\u062f\u060c \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f public\/ \u0627\u0632 \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u062a\u0639\u0627\u0631\u0641 \u067e\u06cc\u0631\u0648\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u06a9\u0627\u0646 \u062f\u0627\u0631\u0627\u06cc\u06cc \u0631\u0627 \u0648\u0627\u0636\u062d \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u062a\u0633\u062a \u06a9\u0631\u062f\u0646<\/p>\n

\u0645\u0627 \u0628\u0627\u06cc\u062f \u0686\u0646\u062f\u06cc\u0646 \u0628\u0633\u062a\u0647 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u0645<\/p>\n

npm install –save-dev @testing-library\/react @testing-library\/jest-dom jest jest-environment-jsdom<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0641\u0647\u0645\u06cc\u0645 \u06a9\u0647 \u0647\u0631 \u0628\u0633\u062a\u0647 \u0686\u0647 \u06a9\u0627\u0631\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n

@testing-library\/react: \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0627\u062c\u0632\u0627\u06cc React \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f<\/p>\n

@testing-library\/jest-dom: \u0647\u0645\u0633\u0627\u0646 Jest \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f<\/p>\n

jest: \u0686\u0627\u0631\u0686\u0648\u0628 \u0627\u0635\u0644\u06cc \u062a\u0633\u062a<\/p>\n

jest-environment-jsdom: \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0633\u062a \u0647\u0627\u06cc \u0645\u0627 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f types.d.ts \u0628\u0631\u0627\u06cc \u062a\u0633\u062a \u062a\u0639\u0627\u0631\u06cc\u0641 \u0646\u0648\u0639<\/p>\n

import ‘@testing-library\/jest-dom’;
\ndeclare global {
\n namespace jest {
\n interface Matchers<R> {
\n toBeInTheDocument(): R;
\n }
\n }
\n interface Window {
\n fetch: jest.Mock;
\n }
\n}
\nexport {};<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062d\u0627\u0644 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062a\u0639\u0627\u0631\u06cc\u0641 \u0646\u0648\u0639 TypeScript \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u06a9\u062f \u0645\u0627 \u0628\u062a\u0648\u0627\u0646\u062f Node.js\u060c React \u0648 Jest API\u0647\u0627 \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u062f\u060c \u0648 \u0627\u0645\u06a9\u0627\u0646 \u062a\u06a9\u0645\u06cc\u0644 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0648 \u06af\u0631\u0641\u062a\u0646 \u062e\u0637\u0627\u0647\u0627\u06cc \u0646\u0648\u0639 \u062f\u0631 \u0637\u0648\u0644 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u06a9\u0646\u062f.<\/p>\n

npm install –save-dev @types\/node @types\/react @types\/jest<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u067e\u0633 \u0627\u0632 \u0646\u0635\u0628 \u0628\u0633\u062a\u0647 \u0647\u0627\u060c \u0628\u0627\u06cc\u062f \u062c\u0633\u062a \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 jest.config.mjs \u0641\u0627\u06cc\u0644 \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f<\/p>\n

jest.config.mjs:<\/p>\n

import nextJest from ‘next\/jest.js’;<\/p>\n

const createJestConfig = nextJest({
\n dir: ‘.\/’,
\n});<\/p>\n

export default createJestConfig({
\n testEnvironment: ‘jest-environment-jsdom’,
\n setupFilesAfterEnv: [‘\/jest.setup.js’]\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 jest.setup.js \u0641\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u062a\u0637\u0628\u06cc\u0642 \u062f\u0647\u0646\u062f\u0647 \u0647\u0627\u06cc DOM.<\/p>\n

jest.setup.js:<\/p>\n

import ‘@testing-library\/jest-dom’;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u06cc\u0646 \u062e\u0637\u0648\u0637 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0634\u0645\u0627 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f package.json \u0632\u06cc\u0631 scripts:<\/p>\n

“test”: “jest”,
\n“test:watch”: “jest –watch”<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n

“scripts”: {
\n “dev”: “next dev”,
\n “build”: “next build”,
\n “start”: “next start”,
\n “lint”: “next lint”,
\n “test”: “jest”,
\n “test:watch”: “jest –watch”
\n },<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0633\u062a \u0647\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f npm test \u06cc\u0627 npm run test:watch \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0634\u0627 \u0627\u0645\u0627 \u0645\u0627 \u0647\u0646\u0648\u0632 \u0647\u06cc\u0686 \u062a\u0633\u062a\u06cc \u0646\u062f\u0627\u0631\u06cc\u0645\u060c \u0628\u0647 \u0632\u0648\u062f\u06cc \u06cc\u06a9 \u062a\u0633\u062a \u0627\u0636\u0627\u0641\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n

\u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u0634\u0627\u0646\u0647 API NewsDataHub \u0634\u0645\u0627<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0631\u0648\u0646\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u062a\u0648\u06a9\u0646 API \u0634\u0645\u0627 \u0631\u0627 \u0637\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0628\u0647 NewsDataHub.com \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc (\u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u0627\u0631\u062a \u0627\u0639\u062a\u0628\u0627\u0631\u06cc)<\/p>\n

\u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0641\u0631\u0645 \u062b\u0628\u062a \u0646\u0627\u0645 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f
\n\u0628\u0627\u06cc\u062f \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u062f \u062a\u0627\u06cc\u06cc\u062f \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f
\n\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062d\u0633\u0627\u0628 \u062e\u0648\u062f \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0631\u062f\u06cc\u062f\u060c \u0628\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u062e\u0648\u062f \u0645\u0646\u062a\u0642\u0644 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0644\u06cc\u062f API \u062e\u0648\u062f \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f<\/p>\n

\u0627\u0641\u0632\u0648\u062f\u0646 \u06a9\u0644\u06cc\u062f API \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 .env.example \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0627\u0644\u06af\u0648 \u0628\u0631\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0639\u0645\u0644 \u06a9\u0646\u062f<\/p>\n

NEXT_PUBLIC_API_URL=https:\/\/api.newsdatahub.com\/v1\/news
\nNEXT_PUBLIC_API_TOKEN=your_token_here<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0633\u067e\u0633 \u0628\u0631\u0627\u06cc \u06a9\u067e\u06cc \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f .env.example \u0642\u0627\u0644\u0628 \u0628\u0647 .env.local \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0648\u0627\u0642\u0639\u06cc \u0634\u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f<\/p>\n

cp .env.example .env.local<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f your_token_here \u062f\u0631 .env.local \u0628\u0627 \u062a\u0648\u06a9\u0646 NewsDataHub API \u062e\u0648\u062f \u0627\u0632 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u062e\u0648\u062f.<\/p>\n

.env.example \u0628\u0647 git \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0627\u0644\u06af\u0648 \u0645\u062a\u0639\u0647\u062f \u0627\u0633\u062a\u060c while .env.local \u062d\u0627\u0648\u06cc \u0627\u0633\u0631\u0627\u0631 \u0648\u0627\u0642\u0639\u06cc \u0627\u0633\u062a \u0648 \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0647\u0646\u06af\u0627\u0645 \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u06a9\u0644\u06cc\u062f API \u0627\u0632 \u06a9\u0644\u0645\u0627\u062a “token” \u0648 “key” \u0628\u0647 \u062c\u0627\u06cc \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062a\u0648\u06a9\u0646 API \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f\u060c \u0622\u0646 \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f .env.local \u0641\u0627\u06cc\u0644:<\/p>\n

NEXT_PUBLIC_API_URL=https:\/\/api.newsdatahub.com\/v1
\nNEXT_PUBLIC_API_TOKEN=your_newsdatahub_token<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0648 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0636\u0631\u0648\u0631\u06cc \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645. \u0645\u0646 \u0647\u062f\u0641 \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0647\u0631 \u06cc\u06a9 \u0631\u0627 \u062a\u0648\u0636\u06cc\u062d \u0645\u06cc \u062f\u0647\u0645:<\/p>\n

\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc .gitignore<\/p>\n

\u0627\u06cc\u0646 .gitignore \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062f\u0631 \u0637\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f. \u0628\u0647 Git \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u062f\u0627\u0645 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0648 \u067e\u0648\u0634\u0647 \u0647\u0627 \u0631\u0627 \u0627\u0632 \u06a9\u0646\u062a\u0631\u0644 \u0646\u0633\u062e\u0647 \u062d\u0630\u0641 \u06a9\u0646\u062f.<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0632 \u062e\u0648\u062f\u0645\u0627\u0646 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u0645 .env.local \u0641\u0627\u06cc\u0644 \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0628\u0647 \u0622\u0646 \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f .gitignore.<\/p>\n

# Environment files
\n.env*.local<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062a\u0646\u0638\u06cc\u0645 \u062a\u0639\u0627\u0631\u06cc\u0641 \u0646\u0648\u0639 \u0645\u062d\u06cc\u0637<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f types\/env.d.ts \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u062a\u0639\u0627\u0631\u06cc\u0641 \u0646\u0648\u0639 TypeScript \u0628\u0631\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc:<\/p>\n

declare global {
\n namespace NodeJS {
\n interface ProcessEnv {
\n NEXT_PUBLIC_API_URL: string;
\n NEXT_PUBLIC_API_TOKEN: string;
\n }
\n }
\n}<\/p>\n

export {};<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0628\u0647 TypeScript \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc \u0645\u0627 \u0645\u06cc \u06af\u0648\u06cc\u062f \u0648 \u0627\u0645\u06a9\u0627\u0646 \u0628\u0631\u0631\u0633\u06cc \u0635\u062d\u06cc\u062d \u0646\u0648\u0639 \u0631\u0627 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u062f\u0633\u062a\u0631\u0633\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f process.env \u0645\u0642\u0627\u062f\u06cc\u0631 \u0648 \u0627\u0631\u0627\u0626\u0647 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u062a\u06a9\u0645\u06cc\u0644 \u062e\u0648\u062f\u06a9\u0627\u0631. \u0628\u062f\u0648\u0646 \u0622\u0646\u060c TypeScript \u0627\u06cc\u0646 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0631\u0627 \u0627\u0632 \u0646\u0648\u0639 \u062e\u0648\u062f \u062f\u0631 \u0646\u0638\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f any .<\/p>\n

\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc ESLint<\/p>\n

\u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f .eslintrc.json \u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0642\u0648\u0627\u0646\u06cc\u0646 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 Next.js \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647\u200c\u0647\u0627.<\/p>\n

{
\n “extends”: [
\n “next\/core-web-vitals”
\n ]\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u062f \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f types\/cache.ts.\u0633\u0627\u062e\u062a\u0627\u0631 \u0633\u06cc\u0633\u062a\u0645 \u062d\u0627\u0641\u0638\u0647 \u067e\u0646\u0647\u0627\u0646 \u0633\u0645\u062a \u0633\u0631\u0648\u06cc\u0633 \u06af\u06cc\u0631\u0646\u062f\u0647 \u0645\u0627 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0646\u062d\u0648\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0645\u0647\u0631\u0647\u0627\u06cc \u0632\u0645\u0627\u0646\u06cc \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0628\u0631\u06cc \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

import { NewsItem } from “.”;<\/p>\n

export interface CacheData {
\n timestamp: number;
\n data: NewsItem[];
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f types\/crypto.ts.\u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0627\u062f\u0647 \u0642\u06cc\u0645\u062a \u0627\u0631\u0632\u0647\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 CoinCap API\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0642\u06cc\u0645\u062a\u060c \u0627\u0631\u0632\u0634 \u0628\u0627\u0632\u0627\u0631 \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a 24 \u0633\u0627\u0639\u062a\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

export type CoinData = {
\n [key: string]: {
\n usd: number;
\n usd_market_cap: number;
\n usd_24h_vol: number;
\n usd_24h_change: number;
\n last_updated_at: number;
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f news.ts\u062d\u0627\u0648\u06cc \u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u0631\u062f \u062e\u0628\u0631\u06cc \u0627\u0632 NewsDataHub API \u0648 \u0644\u0648\u0627\u0632\u0645 \u062c\u0627\u0646\u0628\u06cc \u0628\u0631\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 NewsCard \u0645\u0627.<\/p>\n

export interface NewsItem {
\n id: string;
\n title: string;
\n article_link: string;
\n description: string;
\n pub_date: string;
\n }<\/p>\n

export interface NewsCardProps {
\n index: number;
\n item: NewsItem;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f types\/index.ts.\u0646\u0642\u0637\u0647 \u0635\u0627\u062f\u0631\u0627\u062a \u0645\u0631\u06a9\u0632\u06cc \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u062a\u0639\u0627\u0631\u06cc\u0641 \u0646\u0648\u0639\u060c \u0627\u0645\u06a9\u0627\u0646 \u0648\u0627\u0631\u062f\u0627\u062a \u067e\u0627\u06a9 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

export * from ‘.\/cache’;
\nexport * from ‘.\/news’;
\nexport * from ‘.\/crypto’;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a NewsCard \u0648 PriceTicker<\/p>\n

\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0645\u0627 \u0627\u062c\u0632\u0627\u06cc \u062e\u0648\u062f \u0648 \u0633\u0628\u06a9 \u0622\u0646\u0647\u0627 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0647\u0631 \u062c\u0632\u0621 \u0628\u0627\u06cc\u062f \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0645\u0631\u0628\u0648\u0637\u0647 \u062e\u0648\u062f \u0628\u0627\u0634\u062f.<\/p>\n

\u062c\u0632\u0621 NewsCard<\/p>\n

app\/components\/news-feed\/NewsCard.tsx<\/p>\n

import styles from ‘.\/styles.module.css’;
\nimport { NewsCardProps } from ‘@\/types’;<\/p>\n

export const NewsCard: React.FC<NewsCardProps> = ({index, item}) => {
\n return (
\n <div key={index} className={styles.newsCard}>
\n <h2 className={styles.newsTitle}>{item.title}h2>
\n <p>{item.description.slice(0, 200)+”…”} Read more
\n <br\/>
\n <br\/>
\n <a href={item.article_link} target=”_blank” rel=”noopener noreferrer” className={styles.newsLink}>
\n {item.article_link}
\n a>
\n p><\/p>\n

<div className={styles.newsDate}>
\n {new Date(item.pub_date).toLocaleDateString()}
\n div>
\n div>
\n )
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

app\/components\/news-feed\/styles.module.css<\/p>\n

.newsCard {
\n padding: 15px;
\n border: 1px solid #ddd;
\n border-radius: 4px;
\n margin-bottom: 15px;
\n}<\/p>\n

.newsTitle {
\n margin: 0 0 10px 0;
\n font-size: 1.2em;
\n color: #2e009a;
\n font-family: math;
\n}<\/p>\n

.newsDate {
\n color: #666;
\n font-size: 0.9em;
\n margin-top: 10px;
\n}<\/p>\n

.newsLink {
\n color:darkcyan;
\n}<\/p>\n

.newsLink:hover {
\n color: rgb(3, 79, 79);
\n cursor: pointer;
\n text-decoration: underline;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

app\/components\/news-feed\/index.tsx<\/p>\n

export { NewsCard } from ‘.\/NewsCard’;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a PriceTicker<\/p>\n

app\/components\/price-ticker\/PriceTicker.tsx<\/p>\n

import { useState, useEffect } from ‘react’;
\nimport styles from ‘.\/styles.module.css’;
\nimport { CoinData } from ‘@\/types’;<\/p>\n

export const PriceTicker = () => {
\n const [prices, setPrices] = useState<CoinData>({});
\n const [error, setError] = useState<string | null>(null);
\n const [loading, setLoading] = useState(true);<\/p>\n

const fetchPrices = async () => {
\n try {
\n const response = await fetch(‘https:\/\/api.coingecko.com\/api\/v3\/simple\/price?ids=bitcoin,ethereum,dogecoin&vs_currencies=usd&include_24hr_change=true’);
\n if (!response.ok) throw new Error(‘Failed to fetch prices’);<\/p>\n

const data = await response.json();<\/p>\n

setPrices(data);
\n setError(null);
\n } catch (err) {
\n setError(‘Failed to load prices’);
\n console.error(‘Price fetch error:’, err);
\n } finally {
\n setLoading(false);
\n }
\n };<\/p>\n

useEffect(() => {
\n fetchPrices();
\n const interval = setInterval(fetchPrices, 60000); \/\/ Update every minute
\n return () => clearInterval(interval);
\n }, []);<\/p>\n

if (loading) return <div className={styles.ticker}>Loading prices…div>;
\n if (error) return <div className={styles.ticker}>Price data unavailablediv>;<\/p>\n

return (
\n <div className={styles.ticker}>
\n {Object.entries(prices).map(([coinId, data]) => {
\n const price = data.usd.toLocaleString(‘en-US’, {
\n style: ‘currency’,
\n currency: ‘USD’,
\n minimumFractionDigits: 2,
\n maximumFractionDigits: 2
\n });<\/p>\n

const change = data.usd_24h_change || 0;
\n const changeClass = change >= 0 ? styles.positive : styles.negative;<\/p>\n

return (
\n <div key={coinId} className={styles.cryptoPrice}>
\n <span className={styles.symbol}>{coinId.toUpperCase()}span>
\n <span className={styles.price}>{price}span>
\n <span className={`${styles.change} ${changeClass}`}>
\n {change >= 0 ? ‘\u2191’ : ‘\u2193’}
\n {Math.abs(change).toFixed(2)}%
\n span>
\n div>
\n );
\n })}
\n div>
\n);
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

app\/components\/price-ticker\/styles.module.css<\/p>\n

.ticker {
\n background: #1a1a1a;
\n color: white;
\n padding: 10px;
\n border-radius: 8px;
\n margin-bottom: 20px;
\n overflow-x: auto;
\n display: flex;
\n gap: 20px;
\n align-items: center;
\n}<\/p>\n

.cryptoPrice {
\n display: flex;
\n align-items: center;
\n gap: 8px;
\n padding: 4px 8px;
\n background: rgba(255, 255, 255, 0.1);
\n border-radius: 4px;
\n white-space: nowrap;
\n}<\/p>\n

.symbol {
\n font-weight: bold;
\n color: #ffd700;
\n}<\/p>\n

.price {
\n font-family: monospace;
\n}<\/p>\n

.change {
\n font-size: 0.9em;
\n padding: 2px 6px;
\n border-radius: 4px;
\n}<\/p>\n

.positive {
\n color: #00ff00;
\n}<\/p>\n

.negative {
\n color: #ff4444;
\n}<\/p>\n

@keyframes slide {
\n 0% {
\n transform: translateX(100%);
\n }
\n 100% {
\n transform: translateX(-100%);
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

app\/components\/news-feed\/index.tsx<\/p>\n

export { PriceTicker } from ‘.\/PriceTicker’;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0633\u0627\u062e\u062a \u0645\u0624\u0644\u0641\u0647 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<\/p>\n

\u062f\u0631 Next.js App Router\u060c \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f app\/page.tsx. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0641\u0627\u06cc\u0644 \u0642\u0631\u0627\u0631 \u0627\u0633\u062a \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc \u0634\u0648\u062f page.tsx \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0642\u0631\u0627\u0631\u062f\u0627\u062f\u0647\u0627\u06cc Next.js\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062e\u0648\u062f \u0631\u0627 \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 Home \u062a\u0627 \u0628\u0647 \u0648\u0636\u0648\u062d \u0647\u062f\u0641 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u062f.<\/p>\n

\u067e\u06cc\u0634 \u0628\u0631\u0648\u06cc\u062f \u0648 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f app\/components\/page.tsx \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631<\/p>\n

‘use client’;<\/p>\n

import { useState, useEffect } from ‘react’;
\nimport { PriceTicker } from ‘@\/app\/components\/price-ticker’;
\nimport { NewsCard } from ‘@\/app\/components\/news-feed’;
\nimport { CacheData, NewsItem } from ‘@\/types’;
\nimport styles from ‘.\/page.module.css’;<\/p>\n

\/\/ Environment variables for API configuration
\nconst API_URL = process.env.NEXT_PUBLIC_API_URL;
\nconst API_TOKEN = process.env.NEXT_PUBLIC_API_TOKEN;<\/p>\n

\/\/ Cache duration set to one hour
\nconst CACHE_DURATION = 1000 * 60 * 60;
\nconst TOPICS = [‘cryptocurrency’];<\/p>\n

\/\/ In-memory cache for storing news data
\nconst cache: Record<string, CacheData> = {};<\/p>\n

export default function Home() {
\n \/\/ State management using React hooks
\n const [news, setNews] = useState<NewsItem[]>([]);
\n const [loading, setLoading] = useState(false);
\n const [error, setError] = useState<string | null>(null);
\n const [lastUpdated, setLastUpdated] = useState<Date | null>(null);<\/p>\n

\/\/ Fetches news data with built-in caching
\n const fetchNews = async (topics: string[]) => {
\n const cacheKey = topics.sort().join(‘,’);
\n const cachedData = cache[cacheKey];<\/p>\n

if (cachedData && Date.now() – cachedData.timestamp < CACHE_DURATION) {
\n setNews(cachedData.data);
\n setLastUpdated(new Date(cachedData.timestamp));
\n return;
\n }<\/p>\n

setLoading(true);
\n setError(null);<\/p>\n

try {
\n const response = await fetch(`${API_URL}?language=en&topic=cryptocurrency`, {
\n headers: {
\n ‘x-api-key’: API_TOKEN,
\n ‘Content-Type’: ‘application\/json’
\n },
\n });<\/p>\n

if (!response.ok) throw new Error(‘Failed to fetch news’);<\/p>\n

const articles = await response.json();
\n const data: NewsItem[] = articles.data;<\/p>\n

cache[cacheKey] = {
\n timestamp: Date.now(),
\n data
\n };<\/p>\n

setNews(data);
\n setLastUpdated(new Date());
\n } catch (err) {
\n setError(err instanceof Error ? err.message : ‘An error occurred’);
\n } finally {
\n setLoading(false);
\n }
\n };<\/p>\n

\/\/ Fetch data when component mounts
\n useEffect(() => {
\n fetchNews(TOPICS);
\n }, []);<\/p>\n

\/\/ Handler for manual refresh
\n const handleRefresh = () => {
\n const cacheKey = TOPICS.sort().join(‘,’);
\n delete cache[cacheKey];
\n fetchNews(TOPICS);
\n };<\/p>\n

return (
\n <div className={styles.container}>
\n <PriceTicker \/><\/p>\n

{lastUpdated && (
\n <div className={styles.lastUpdated}>
\n Last updated: {lastUpdated.toLocaleTimeString()}
\n <button onClick={handleRefresh} className={styles.refreshButton}>
\n Refresh
\n button>
\n div>
\n )}<\/p>\n

{error && <div className={styles.error}>{error}div>}<\/p>\n

{loading ? (
\n <div className={styles.loading}>Loading…div>
\n ) : (
\n news.map((item: NewsItem, index: number) => (
\n <NewsCard key={item.id || index} item={item} index={index} \/>
\n ))
\n )}
\n div>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc page.module.css \u0628\u0627 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0632\u06cc\u0631<\/p>\n

.container {
\n max-width: 800px;
\n margin: 0 auto;
\n padding: 20px;
\n}<\/p>\n

.topics {
\n margin-bottom: 20px;
\n}<\/p>\n

.topic {
\n margin-right: 10px;
\n padding: 5px 10px;
\n border: 1px solid #ddd;
\n border-radius: 4px;
\n background: none;
\n cursor: pointer;
\n}<\/p>\n

.topicSelected {
\n background: #007bff;
\n color: white;
\n border-color: #007bff;
\n}<\/p>\n

.error {
\n color: #dc3545;
\n padding: 10px;
\n border: 1px solid #dc3545;
\n border-radius: 4px;
\n margin-bottom: 15px;
\n}<\/p>\n

.loading {
\n text-align: center;
\n padding: 20px;
\n}<\/p>\n

.lastUpdated {
\n color: #666;
\n font-size: 0.9em;
\n margin-bottom: 15px;
\n}<\/p>\n

.refreshButton {
\n background: #007bff;
\n color: white;
\n border: none;
\n padding: 5px 10px;
\n border-radius: 4px;
\n cursor: pointer;
\n margin-left: 10px;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc app\/layout.tsx \u0628\u0627 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631:<\/p>\n

export default function RootLayout({
\n children,
\n}: {
\n children: React.ReactNode
\n}) {
\n return (
\n <html lang=”en”>
\n <head>
\n <title>Crypto News Aggregator Applicationtitle>
\n <meta name=”description” content=”Crypto News Aggregator Application” \/>
\n head>
\n <body>
\n {children}
\n body>
\n html>
\n )
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627<\/p>\n

\u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u062f \u0648 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/p>\n

npm run dev<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 https:\/\/localhost:3000 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f<\/p>\n

\u0628\u0627\u0628\u062a \u0627\u062a\u0645\u0627\u0645 \u067e\u0631\u0648\u0698\u0647 \u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645! \ud83c\udfc6 \ud83d\udc4f<\/p>\n

\u062a\u0633\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0635\u0641\u062d\u0647<\/p>\n

\u0645\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0628\u0631\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 Home \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0623\u06cc\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u062e\u0628\u0627\u0631 \u067e\u0633 \u0627\u0632 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u062f \u0648 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n

__tests__\/Home.test.tsx<\/p>\n

import { render, screen, waitFor } from ‘@testing-library\/react’;
\nimport Home from ‘@\/app\/page’;<\/p>\n

describe(‘Home’, () => {
\n beforeEach(() => {
\n \/\/ Set up test environment variables
\n process.env.NEXT_PUBLIC_API_URL = ‘http:\/\/test-api.com’;
\n process.env.NEXT_PUBLIC_API_TOKEN = ‘test-token’;<\/p>\n

\/\/ Mock fetch for both API endpoints
\n global.fetch = jest.fn((url) => {
\n \/\/ Mock responses for different API calls
\n if (url.includes(‘api.coingecko.com’)) {
\n return Promise.resolve({
\n ok: true,
\n json: () => Promise.resolve({
\n bitcoin: { usd: 65000, usd_24h_change: 2.5 }
\n }),
\n status: 200,
\n } as Response);
\n }
\n return Promise.resolve({
\n ok: true,
\n json: () => Promise.resolve({
\n data: [{
\n id: ‘1’,
\n title: ‘News Title’,
\n description: ‘News Description’,
\n url: ‘https:\/\/test.com’,
\n published_at: ‘2024-03-25’
\n }]\n }),
\n status: 200,
\n } as Response);
\n }) as jest.Mock;
\n });<\/p>\n

test(‘renders news feed’, async () => {
\n render(<Home \/>);
\n await waitFor(
\n () => expect(screen.getByText(“News Title”)).toBeInTheDocument(),
\n { timeout: 3000 }
\n );
\n });
\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062a\u0633\u062a \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/p>\n

npm run test<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 \u0622\u0632\u0645\u0627\u06cc\u0634 \u062a\u0623\u06cc\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 Home \u0645\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u062e\u0628\u0627\u0631 \u0631\u0627 \u067e\u0633 \u0627\u0632 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. <\/p>\n

\u062a\u0633\u062a \u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0628\u0631\u0627\u06cc \u0627\u062c\u0632\u0627\u06cc PriceTicker \u0648 NewsCard \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u062f\u0631 \u0645\u062e\u0632\u0646 GitHub \u067e\u0631\u0648\u0698\u0647 \u06cc\u0627\u0641\u062a. \u0627\u06cc\u0646 \u062a\u0633\u062a\u200c\u0647\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0631\u0641\u062a\u0627\u0631 \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0631\u0627 \u067e\u0648\u0634\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f. \u0645\u0646 \u0634\u0645\u0627 \u0631\u0627 \u062a\u0634\u0648\u06cc\u0642 \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u062a\u0633\u062a \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0628\u0647\u0628\u0648\u062f \u0628\u06cc\u0634\u062a\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n

\u0686\u0646\u062f \u0627\u06cc\u062f\u0647:<\/p>\n

\u0627\u062c\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u0646\u0627\u0633\u0628
\n\u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u062e\u0628\u0627\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f
\n\u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631\u06cc \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f
\n\u0645\u062c\u0645\u0648\u0639\u0647 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0631\u0627 \u062a\u0642\u0648\u06cc\u062a \u06a9\u0646\u06cc\u062f
\n\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0645\u0648\u0636\u0648\u0639 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641 \u0627\u062e\u0628\u0627\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<\/p>\n

\u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u062f\u0646\u0628\u0627\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0645\u062a\u0634\u06a9\u0631\u0645 \ud83d\ude04<\/p>\n

\u0627\u0639\u062a\u0628\u0627\u0631 \u062a\u0635\u0648\u06cc\u0631 \u062c\u0644\u062f: \u0639\u06a9\u0633 \u062a\u0648\u0633\u0637 \u067e\u0631\u0648\u0698\u0647 \u0633\u0647\u0627\u0645 RDNE: https:\/\/www.pexels.com\/photo\/selective-focus-photo-of-silver-and-gold-bitcoins-8369648\/<\/p>\n

\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u062f\u0647 \u0627\u0645\u0627 \u0645\u0641\u06cc\u062f \u0628\u0631\u0627\u06cc \u062c\u0645\u0639\u200c\u0622\u0648\u0631\u06cc \u0627\u062e\u0628\u0627\u0631 \u0627\u0631\u0632\u0647\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0628\u0633\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u0627\u0632 NewsDataHub \u0648 API\u0647\u0627\u06cc CoinGecko \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u062f\u0641 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0633\u0637\u062d \u0645\u0628\u062a\u062f\u06cc \u0627\u0633\u062a – \u0627\u06af\u0631 \u0641\u06a9\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0647\u0631 \u0628\u062e\u0634 \u0627\u0631\u0632\u0634\u06cc \u0628\u0647 \u062a\u062c\u0631\u0628\u0647 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0634\u0645\u0627 \u0646\u0645\u06cc\u200c\u0627\u0641\u0632\u0627\u06cc\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0646 \u0635\u0631\u0641\u0646\u0638\u0631 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u06a9\u062f \u0646\u0647\u0627\u06cc\u06cc \u067e\u0631\u0648\u0698\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u062a: https:\/\/github.com\/newsdatahub\/crypto-news-aggregator<\/p>\n

\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0646\u0633\u062e\u0647 \u062a\u0648\u0644\u06cc\u062f\u06cc \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0642\u06cc\u0642\u0627\u064b \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u062a: https:\/\/newsdatahub.com\/crypto<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Next.js \u062c\u062f\u06cc\u062f \u0628\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc Typescript \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.<\/p>\n

\n
npx<\/span> create<\/span>-<\/span>next<\/span>-<\/span>app<\/span>@<\/span>latest<\/span> crypto<\/span>-<\/span>news<\/span>-<\/span>aggregator<\/span> --<\/span>typescript<\/span>\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0648\u0642\u062a\u06cc \u0627\u0632 \u0634\u0645\u0627 \u062e\u0648\u0627\u0633\u062a\u0647 \u0634\u062f\u060c \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n