Configuration

.env

@@ -0,0 +1,6 @@
+NEXT_PUBLIC_API_PATTERN=/api
+
+NEXT_PUBLIC_CONTENT_URL=/content/torrent
+NEXT_PUBLIC_FRAGMENT_URL=/content/audio
+NEXT_PUBLIC_COVER_FULL_URL=/content/images/cover/full_size
+NEXT_PUBLIC_COVER_PREVIEW_URL=/content/images/cover/preview

.env.development

@@ -1,5 +1,9 @@
-NEXT_PUBLIC_BASE_URL=http://127.0.0.1:3000/api
+BACKEND_PROTOCOL=http
-NEXT_PUBLIC_CONTENT_URL=http://127.0.0.1:8000/content/torrent
+BACKEND_DOMAIN=127.0.0.1
-NEXT_PUBLIC_FRAGMENT_URL=http://127.0.0.1:8000/content/audio
+BACKEND_PORT=8000
-NEXT_PUBLIC_COVER_FULL_URL=http://127.0.0.1:8000/content/images/cover/full_size
+
-NEXT_PUBLIC_COVER_PREVIEW_URL=http://127.0.0.1:8000/content/images/cover/preview
+BASE_PROTOCOL=http
+BASE_DOMAIN=127.0.0.1
+BASE_PORT=3000
+
+NEXT_PUBLIC_BASE_URL=http://127.0.0.1:3000

next.config.mjs

@@ -1,21 +1,20 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	async rewrites() {
-		return process.env.NODE_ENV == "development"
+		return [
-			? [
 				{
 					source: "/api/:path*",
-						destination: "http://127.0.0.1:8000/:path*",
+					destination: `${process.env.BACKEND_PROTOCOL}://`+
-					},
+					`${process.env.BACKEND_DOMAIN}:${process.env.BACKEND_PORT}/:path*`,
+				}
 			]
-			: [];
 	},
 	images: {
 		remotePatterns: [
 			{
-				protocol: "http",
+				protocol: process.env.BASE_PROTOCOL,
-				hostname: "127.0.0.1",
+				hostname: process.env.BASE_DOMAIN,
-				port: "8000",
+				port: process.env.BASE_PORT,
 			},
 		],
 	},

src/app/page.tsx

@@ -11,20 +11,27 @@ export const metadata: Metadata = {
 };
 
 export default async function Home() {
-  const cards: { [k in SectionType]?: ItemCardType[] | null } = {};
+  const requests = SectionService.sections.map((section) =>
-  await Promise.all(
+    ItemService.itemsConfiguration[
-    SectionService.sections.map(async (section) => {
-      cards[section] = await ItemService.itemsConfiguration[
       SectionService.sectionsConfiguration[section].itemType
-      ].service.GetCards();
+    ].service.GetCards()
-    })
+  );
+  const data = await Promise.all(requests);
+
+  const cards = await SectionService.sections.reduce(
+    (cards, section, i) => ({
+      ...cards,
+      [section]: data[i],
+    }),
+    {} as { [k in SectionType]: ItemCardType[] | null }
   );
 
   return (
     <>
-      {SectionService.sections.map((section) => (
+      {cards &&
+        SectionService.sections.map((section, i) => (
           <section key={section}>
-          {cards[section] && cards[section].length > 0 && (
+            {cards[section] && (
               <Section
                 name={
                   SectionService.sectionsConfiguration[section]
@@ -34,10 +41,11 @@ export default async function Home() {
                   SectionService.isSection(section) ? `/${section}` : undefined
                 }
                 invite_text={
-                SectionService.sectionsConfiguration[section].sectionInviteText
+                  SectionService.sectionsConfiguration[section]
+                    .sectionInviteText
                 }
               >
-              {cards[section].map((card) => (
+                {cards[section]?.map((card) => (
                   <ItemCard key={card.id} card={card} />
                 ))}
               </Section>

src/shared/ui/image.tsx

@@ -21,6 +21,9 @@ export const Img = ({
         <Image
           className={className}
           src={
+            "" +
+            process.env.NEXT_PUBLIC_BASE_URL +
+            process.env.NEXT_PUBLIC_API_PATTERN +
             (preview
               ? process.env.NEXT_PUBLIC_COVER_PREVIEW_URL
               : process.env.NEXT_PUBLIC_COVER_FULL_URL) +

src/shared/utils/http/http.ts

@@ -34,7 +34,12 @@ export abstract class HTTPService {
     schema: Z,
     options?: RequestOptions
   ) {
-    return await fetch(process.env.NEXT_PUBLIC_BASE_URL + url, {
+    return await fetch(
+      "" +
+        process.env.NEXT_PUBLIC_BASE_URL +
+        process.env.NEXT_PUBLIC_API_PATTERN +
+        url,
+      {
         method: method,
         headers: {
           accept: "application/json",
@@ -52,7 +57,8 @@ export abstract class HTTPService {
               ),
         cache: options?.cache ?? options?.next ? undefined : "no-cache",
         next: options?.next ?? {},
-    })
+      }
+    )
       .then((r) => {
         if (r && r.ok) return r;
         else throw Error("Response ok = false");

src/widgets/itemInfo/itemFragment.tsx

@@ -62,6 +62,9 @@ export const ItemFragment = ({
           controlsList="nodownload"
           typeof="audio/mpeg"
           src={
+            "" +
+            process.env.NEXT_PUBLIC_BASE_URL +
+            process.env.NEXT_PUBLIC_API_PATTERN +
             process.env.NEXT_PUBLIC_FRAGMENT_URL +
             "/" +
             (watched_fragment ?? "")

src/widgets/itemInfo/itemTorrent.tsx

@@ -67,7 +67,12 @@ export const ItemTorrent = ({
         <div className="flex flex-col items-center">
           <Link
             href={
-              process.env.NEXT_PUBLIC_CONTENT_URL + "/" + watched_torrent_file
+              "" +
+              process.env.NEXT_PUBLIC_BASE_URL +
+              process.env.NEXT_PUBLIC_API_PATTERN +
+              process.env.NEXT_PUBLIC_CONTENT_URL +
+              "/" +
+              watched_torrent_file
             }
             className={clsx(
               "p-4 bg-ac0 text-fg1 text-2xl rounded-lg",