diff --git a/src/app/[name_slug]/page.tsx b/src/app/[name_slug]/page.tsx index ca2dae0..2ffea71 100644 --- a/src/app/[name_slug]/page.tsx +++ b/src/app/[name_slug]/page.tsx @@ -1,4 +1,11 @@ import { DiscDetail } from "@components"; +import { API } from "@services"; + +export const generateStaticParams = async () => { + const discs = await API.getDiscs(); + const paths = discs.map(({ name_slug }) => ({ params: { name_slug } })); + return paths; +}; export default function DiscDetailPage({ params: { name_slug } }: { params: { name_slug: string } }) { return ; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 43370eb..a3369f5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,7 +3,7 @@ import "./globals.css"; import { Inter } from "next/font/google"; import { DiscContextProvider } from "@components"; -import { useApi } from "@hooks"; +import { API } from "@services"; import type { Metadata } from "next"; @@ -16,8 +16,9 @@ export default async function RootLayout({ children: React.ReactNode; modal: React.ReactNode; }>) { - const { getDiscs } = useApi(); - const discs = await getDiscs(); + const discs = await API.getDiscs(); + const imageUrls = discs.map(({ pic }) => pic).filter(pic => !!pic); + await API.fetchMany(imageUrls); return ( diff --git a/src/components/DiscDetail.tsx b/src/components/DiscDetail.tsx index 2411336..4fad7ac 100644 --- a/src/components/DiscDetail.tsx +++ b/src/components/DiscDetail.tsx @@ -46,7 +46,8 @@ export const DiscDetail = ({ name_slug }: DiscDetailProps) => {
- {name} + {/* eslint-disable-next-line @next/next/no-img-element */} + {name}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts deleted file mode 100644 index 422cfde..0000000 --- a/src/hooks/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./useApi"; -export * from "./useNotification"; diff --git a/src/hooks/useApi.ts b/src/hooks/useApi.ts deleted file mode 100644 index cd832fa..0000000 --- a/src/hooks/useApi.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { RequestMethod } from "@constants"; -import { config } from "@services"; - -import type { Disc, RequestMethodOption } from "@types"; - -export const useApi = () => { - const request = async ({ - path, - method, - body, - tags - }: { - path: string; - method: RequestMethodOption; - body?: unknown; - tags?: string[]; - }) => { - const res = await fetch(`${config.API_URL}/${path}`, { - method, - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${config.API_KEY}` - }, - body: JSON.stringify(body), - next: { tags } - }); - return res.json() as Promise; - }; - - const getDiscs = async () => request({ path: "disc", method: RequestMethod.GET, tags: ["disc"] }); - - return { getDiscs }; -}; diff --git a/src/hooks/useNotification.ts b/src/hooks/useNotification.ts deleted file mode 100644 index 6431b94..0000000 --- a/src/hooks/useNotification.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const useNotification = () => { - // -}; diff --git a/src/services/api.ts b/src/services/api.ts new file mode 100644 index 0000000..c54dd87 --- /dev/null +++ b/src/services/api.ts @@ -0,0 +1,26 @@ +import { RequestMethod } from "@constants"; +import { config } from "@services"; + +import type { Disc, RequestParams } from "@types"; + +const request = async ({ url, method, body, tags }: RequestParams) => { + const res = await fetch(url, { + method, + headers: { + Authorization: `Bearer ${config.API_KEY}` + }, + body: JSON.stringify(body), + next: { tags } + }); + return res.json() as Promise; +}; + +export const API = { + getDiscs: async () => + request({ + url: `${config.API_URL}/disc`, + method: RequestMethod.GET, + tags: ["disc"] + }), + fetchMany: async (urls: string[]) => Promise.allSettled(urls.map(url => fetch(url, { next: { tags: ["image"] } }))) +}; diff --git a/src/services/index.ts b/src/services/index.ts index 5c62e04..14974bd 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -1 +1,2 @@ +export * from "./api"; export * from "./config"; diff --git a/src/types/index.ts b/src/types/index.ts index 026a49b..ea85bfa 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -10,6 +10,14 @@ export type Config = { export type RequestMethodOption = keyof typeof RequestMethod; +export type RequestParams = { + url: string; + method: RequestMethodOption; + accept?: string; + body?: unknown; + tags?: string[]; +}; + export type Disc = { id: string; name: string;