🐛 Use Github Token to increase requests

Author: max-programming

env.mjs

@@ -0,0 +1,17 @@
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+
+export const env = createEnv({
+  server: {
+    GITHUB_TOKEN: z.string().optional()
+  },
+  client: {},
+  // If you're using Next.js < 13.4.4, you'll need to specify the runtimeEnv manually
+  runtimeEnv: {
+    GITHUB_TOKEN: process.env.GITHUB_TOKEN
+  }
+  // For Next.js >= 13.4.4, you only need to destructure client variables:
+  // experimental__runtimeEnv: {
+  //   NEXT_PUBLIC_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_PUBLISHABLE_KEY,
+  // }
+});

next.config.js renamed to next.config.mjs

@@ -1,16 +1,21 @@
+await import('./env.mjs');
+
 /** @type {import('next').NextConfig} */
-module.exports = {
+const config = {
   reactStrictMode: true,
   images: {
-    domains: ['avatars.githubusercontent.com', 'raw.githubusercontent.com'],
+    domains: ['avatars.githubusercontent.com', 'raw.githubusercontent.com']
   },
   async redirects() {
     return [
       {
         source: '/github',
-        destination: 'https://github.com/max-programming/hacktoberfest-projects',
-        permanent: true,
-      },
-    ]
-  },
+        destination:
+          'https://github.com/max-programming/hacktoberfest-projects',
+        permanent: true
+      }
+    ];
+  }
 };
+
+export default config;

package-lock.json

@@ -15,6 +15,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@t3-oss/env-nextjs": "^0.6.1",
     "@twuni/emojify": "^1.0.2",
     "daisyui": "^3.7.7",
     "framer-motion": "^10.16.4",
@@ -24,7 +25,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.2",
-    "react-icons": "^4.11.0"
+    "react-icons": "^4.11.0",
+    "zod": "^3.22.2"
   },
   "devDependencies": {
     "@types/node": "^20.6.3",

package.json

@@ -13,6 +13,7 @@ import Sort from 'components/Sort';
 import StarsFilter from 'components/StarsFilter';
 import capFirstLetter from 'utils/capFirstLetter';
 import { RepoItem, RepoData } from 'types';
+import { env } from 'env.mjs';
 
 interface Props {
   page: number;
@@ -39,9 +40,13 @@ export const getServerSideProps: GetServerSideProps<Props> = async ctx => {
 
   const apiUrl = `https://api.github.com/search/repositories?q=topic%3Ahacktoberfest+language%3A${languageName}+${searchQuery}+${starsQuery}&page=${page}&per_page=21&sort=${sort}&order=${order}`;
 
-  const res = await fetch(apiUrl, {
-    headers: { Accept: 'application/vnd.github.mercy-preview+json' }
-  });
+  const headers: HeadersInit = {
+    Accept: 'application/vnd.github.mercy-preview+json'
+  };
+
+  if (env.GITHUB_TOKEN) headers.Authorization = `Bearer ${env.GITHUB_TOKEN}`;
+
+  const res = await fetch(apiUrl, { headers });
 
   if (!res.ok) {
     return {