Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/MC-World-Compressor/Frontend/llms.txt

Use this file to discover all available pages before exploring further.

​
Environment Variables

The MC World Compressor Frontend requires environment variables to connect to the backend API.

​
Creating the .env File

Create a .env file in the root of your project: 
touch .env
Add the following environment variable:
.env
NEXT_PUBLIC_BACKEND_URL=http://localhost:8080
Replace http://localhost:8080 with your actual backend URL. If you’re running the backend locally, this is typically the default port.

​
NEXT_PUBLIC_BACKEND_URL

This is the primary environment variable used by the application:
  • Purpose: Points to the backend API that handles world compression
  • Format: Full URL including protocol (http:// or https://)
  • Access: Available in both client and server components (prefixed with NEXT_PUBLIC_)
Examples: 
NEXT_PUBLIC_BACKEND_URL=http://localhost:8080

​
HTTPS Requirements

Important Security Note:If your frontend is served over HTTPS (e.g., deployed on Vercel, Netlify, or any HTTPS environment), your backend must also use HTTPS.Browsers block HTTP requests from HTTPS sites due to mixed content security policies.
Example scenarios:
Frontend ProtocolBackend ProtocolResult
HTTP (localhost)HTTP✅ Works
HTTPS (production)HTTPS✅ Works
HTTPS (production)HTTP❌ Blocked by browser

​
Next.js Configuration

The Next.js configuration is minimal and uses default settings:
next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;
The project uses Next.js defaults, which include:
  • App Router enabled by default
  • React Server Components enabled
  • Automatic code splitting
  • Image optimization via next/image
  • Font optimization via next/font

​
TailwindCSS Configuration

The project uses TailwindCSS v4 with PostCSS integration.

​
PostCSS Configuration

postcss.config.mjs
const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

​
Global Styles

TailwindCSS is imported in app/globals.css:
app/globals.css
@import "tailwindcss";
TailwindCSS v4 uses a simplified configuration approach. Instead of a separate tailwind.config.js file, styles are configured directly through the CSS import.

​
Path Aliases

Path aliases are configured in jsconfig.json:
jsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}
This allows you to use @/ as a shortcut to the root directory: 
// Instead of:
import Component from '../../../components/Component'

// You can use:
import Component from '@/components/Component'

​
Sitemap Configuration

The project includes sitemap generation via next-sitemap:
  • Configured in next-sitemap.config.js
  • Runs automatically after build (postbuild script)
  • Generates sitemap.xml and robots.txt
Sitemap files are git-ignored and regenerated on each build.

​
Middleware

The project uses Next.js middleware for internationalization routing:
  • Located at middleware.js
  • Handles locale detection and routing
  • Supports EN, ES, HI, and AR languages

​
ESLint Configuration

ESLint is configured for Next.js projects: 
npm run lint
This runs Next.js’s built-in ESLint configuration to catch common issues.

Build docs developers (and LLMs) love

Get started for freeTalk to us