next api giphy

next.config.js

@@ -1,16 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    experimental: {
-        appDir: true,
-        serverActions: true
-    },
-    generateEtags: true,
-    swcMinify: true,
-    poweredByHeader: false,
-    output: 'standalone',
-    images: {
-        domains: ['radio.hellnet.eu']
-    }
-}
+  generateEtags: true,
+  swcMinify: true,
+  poweredByHeader: false,
+  output: "standalone",
+  images: {
+    remotePatterns: [{
+      protocol: 'https',
+      hostname: 'radio.hellnet.eu'
+    }],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -10,29 +10,29 @@
     "clean": "rimraf .next node_modules && yarn cache clean && yarn install"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.17",
-    "axios": "^1.4.0",
-    "clsx": "^1.2.1",
-    "copy-to-clipboard": "^3.3.3",
-    "moment": "^2.29.4",
-    "next": "13.4.9",
-    "react": "18.2.0",
-    "react-countdown": "^2.3.5",
-    "react-dom": "18.2.0",
-    "react-icons": "^4.10.1",
-    "schema-dts": "^1.1.2",
-    "server-only": "^0.0.1"
+    "@headlessui/react": "^1",
+    "axios": "^1",
+    "clsx": "^2",
+    "copy-to-clipboard": "^3",
+    "moment": "^2",
+    "next": "^14",
+    "react": "^18",
+    "react-countdown": "^2",
+    "react-dom": "^18",
+    "react-icons": "^4",
+    "schema-dts": "^1",
+    "server-only": "^0"
   },
   "devDependencies": {
-    "@types/node": "20.4.2",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.7",
-    "autoprefixer": "10.4.14",
-    "postcss": "8.4.25",
-    "rimraf": "^5.0.1",
-    "sharp": "^0.32.4",
-    "tailwindcss": "3.3.2",
-    "typescript": "5.1.6"
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10",
+    "postcss": "^8",
+    "rimraf": "^5",
+    "sharp": "^0",
+    "tailwindcss": "^3",
+    "typescript": "^5"
   },
   "packageManager": "^yarn@1.22.19"
 }

src/_libs/servers/helper.hook.ts

@@ -20,12 +20,8 @@ interface IFetchGiphyProps {
 export function userHelperHook() {
 
   const fetchGiphy = async ({ id = 'random' }: IFetchGiphyProps): Promise<IGiphy> => {
-    const r = await fetch(`https://api.giphy.com/v1/gifs/${id}?${decodeURIComponent(new URLSearchParams({
-      api_key: process.env.GIPHY_API_KEY as string,
-      rating: process.env.GIPHY_RATING as string,
-      tag: (moment().day() === 5 ? process.env.GIPHY_TAG_IS_FRIDAY as string : process.env.GIPHY_TAG_IS_NOT_FRIDAY as string),
-    }).toString())}`, { cache: 'no-store' });
-    return await r.json();
+    const url = `${process.env.NEXT_PUBLIC_PROJECT_URL}?${decodeURIComponent(new URLSearchParams({ id }).toString())}`;
+    return await fetch(url, { cache: 'no-store' }).then(r => r.json());
   };
 
   const metadata = async ({ id, robots }: IMetadataProps): Promise<Metadata> => {
@@ -49,8 +45,6 @@ export function userHelperHook() {
       title: 'Îi vineri?',
       description: EDaysOfWeek[moment().day()],
       applicationName: 'Îi vineri?',
-      themeColor: 'black',
-      colorScheme: 'dark',
       creator: 'MD Prodacșăn',
       robots: { follow: robots, index: robots },
       icons: iiVineriLogo.src,

src/app/api/giphy/route.ts

@@ -0,0 +1,30 @@
+import axios from "@/http/axios.http";
+import moment from "moment";
+
+const CONST_API_KEY = process.env.GIPHY_API_KEY;
+const CONST_GIPHY_RATING = process.env.GIPHY_RATING;
+const CONST_TAG = moment().day() === 5 ? process.env.GIPHY_TAG_IS_FRIDAY : process.env.GIPHY_TAG_IS_NOT_FRIDAY;
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const id = searchParams.get("id") || "random";
+
+  try {
+    const response = await axios({
+      method: "GET",
+      baseURL: "https://api.giphy.com",
+      url: `/v1/gifs/${id}`,
+      params: { api_key: CONST_API_KEY, rating: CONST_GIPHY_RATING, tag: CONST_TAG },
+    });
+
+    return Response.json(response);
+  } catch (e) {
+    return Response.json(
+      {},
+      {
+        status: 500,
+        statusText: "Internal error",
+      }
+    );
+  }
+}

src/app/layout.tsx

@@ -1,29 +1,22 @@
-import 'server-only';
+import "server-only";
+import "@/app/globals.css";
 
-import clsx from 'clsx';
-import React, { ReactNode, Suspense } from 'react';
-import { Inter } from 'next/font/google';
+import clsx from "clsx";
+import React, { ReactNode, Suspense } from "react";
+import { Inter } from "next/font/google";
+import MainLayout from "@/components/layouts/main.layout";
 
-import '@/app/globals.css';
+const inter = Inter({ subsets: ["latin"] });
 
-import NavbarComponent from '@/components/ui/navbar/navbar.component';
-import StandWithUkraineComponent from '@/components/ui/stand-with-ukraine/stand-with-ukraine.component';
-
-const inter = Inter({ subsets: ['latin'] });
-
-interface IRootLayout {
+interface IProps {
   children: ReactNode;
 }
 
-export default function RootLayout({ children }: IRootLayout) {
+export default function RootLayout({ children }: IProps) {
   return (
     <html lang="ro">
-      <body className={clsx(inter.className, 'bg-neutral-900')}>
-        <NavbarComponent />
-        <StandWithUkraineComponent />
-        <main className="px-6 mx-auto max-w-screen-md pt-24">
-          {children}
-        </main>
+      <body className={clsx(inter.className, "bg-neutral-900")}>
+        <MainLayout>{children}</MainLayout>
       </body>
     </html>
   );

src/components/layouts/main.layout.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { type ReactNode } from "react";
+
+import NavbarComponent from "@/components/ui/navbar/navbar.component";
+import StandWithUkraineComponent from "@/components/ui/stand-with-ukraine/stand-with-ukraine.component";
+
+interface IProps {
+  children: ReactNode;
+}
+
+export default function MainLayout({ children }: IProps) {
+  return (
+    <>
+      <NavbarComponent />
+      <StandWithUkraineComponent />
+      <main className="px-6 mx-auto max-w-screen-md pt-24">{children}</main>
+    </>
+  );
+}

src/http/axios.http.ts

@@ -0,0 +1,3 @@
+import axios, {type CreateAxiosDefaults, type AxiosInstance} from "axios";
+
+export default (config: CreateAxiosDefaults): AxiosInstance => axios.create(config);