refactor: consolidate Next.js config and improve environment variable handling

- Remove redundant next.config.js in favor of next.config.ts
- Move all configurations to TypeScript file
- Replace hardcoded basePath with environment variable
- Update GitHub Actions workflow to use NEXT_PUBLIC_BASE_PATH
- Update README with environment setup instructions
  - Add local .env setup steps
  - Add GitHub repository secrets configuration
  - Improve deployment documentation

Author: attarchi

.github/workflows/deploy.yml

@@ -10,6 +10,8 @@ permissions:
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
+    env:
+      NEXT_PUBLIC_BASE_PATH: attarchi.github.io
     steps:
       - name: Checkout
         uses: actions/checkout@v4

README.md

@@ -37,7 +37,13 @@ cd attarchi.github.io
 yarn install
 ```
 
-3. Run the development server:
+3. Set up environment variables:
+Create a `.env` file in the root directory with:
+```
+NEXT_PUBLIC_BASE_PATH=your-username.github.io
+```
+
+4. Run the development server:
 ```bash
 yarn dev
 ```
@@ -82,20 +88,15 @@ The site is automatically deployed to GitHub Pages using GitHub Actions. Each pu
    - Navigate to "Pages" under "Code and automation"
    - Set the source to "GitHub Actions"
 
-2. **Next.js Configuration**
-   Add the following to your `next.config.js`:
-   ```js
-   /** @type {import('next').NextConfig} */
-   const nextConfig = {
-     output: 'export',
-     basePath: '/<youname>.github.io',
-     images: {
-       unoptimized: true,
-     },
-   }
-   
-   module.exports = nextConfig
-   ```
+2. **Environment Setup**
+   - Create a `.env` file with your GitHub Pages base path (<yourname>.github.io)
+   - For GitHub Actions, add the environment variable to your GitHub repository:
+     1. Go to your repository settings
+     2. Navigate to "Secrets and variables" → "Actions"
+     3. Click "New repository secret"
+     4. Name: `NEXT_PUBLIC_BASE_PATH`
+     5. Value: `<yourname>.github.io`
+     6. Click "Add secret"
 
 3. **Custom Domain (Optional)**
    - Add your custom domain in repository settings

next.config.js

@@ -1,11 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: 'export',
-    images: {
-        unoptimized: true,
-    },
-    basePath: process.env.NODE_ENV === 'production' ? '/attarchi.github.io' : '',
-    trailingSlash: true,
+  output: 'export',
+  images: {
+    unoptimized: true,
+  },
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
+  trailingSlash: true,
 }
 
 module.exports = nextConfig