Configuration

AnimeThemes Web uses environment variables to configure API endpoints, build behavior, and feature flags. This guide covers all available configuration options.

Environment Files

Next.js supports multiple environment files for different stages:

.env.local - Local development (not committed to git)
.env.development - Development environment
.env.production - Production environment
.env - Default for all environments

For local development, create a .env.local file in the root directory. This file is ignored by git and won’t be committed to version control.

Minimal Setup

The absolute minimum configuration requires only one environment variable:

.env.local

# Set this to the URL on which your local API is served
ANIMETHEMES_API_URL=http://localhost

If you don’t have a local instance of animethemes-server set up, you can use the production URL https://api.animethemes.moe. However, this puts additional load on the AnimeThemes servers. It’s highly recommended to set up your own API instance locally for development.

Server-Side Variables

These variables are only available on the server-side (during build and SSR):

ANIMETHEMES_API_URL

string

required

The URL to the AnimeThemes API which will be used on the server.Example:

ANIMETHEMES_API_URL=http://localhost

This is required if NEXT_PUBLIC_API_URL is not set. At least one API URL must be configured.

MINIMAL_BUILD

boolean

default:"false"

Activate minimal build mode. In minimal build mode, only a small subset of pages get prerendered at build time, significantly reducing build time.Example:

MINIMAL_BUILD=true

Use this during development to speed up builds. Disable for production deployments.

ANALYZE

boolean

default:"false"

Activate the Next.js bundle analyzer. This generates an interactive treemap visualization of the bundle size.Example:

ANALYZE=true

When enabled, run:

npm run build

The analyzer will open in your browser after the build completes.

AUTH_REFERER

string

Custom referer header for authentication requests.Example:

AUTH_REFERER=https://animethemes.moe

Client-Side Variables

These variables are exposed to the browser (prefixed with NEXT_PUBLIC_):

NEXT_PUBLIC_API_URL

string

required

The URL to the AnimeThemes API which will be used in the browser.Example:

NEXT_PUBLIC_API_URL=https://api.animethemes.moe

This is highly recommended even if you set ANIMETHEMES_API_URL. Without it, API requests from the client-side won’t work.

NEXT_PUBLIC_VIDEO_URL

string

The URL from which video files should be served.Example:

NEXT_PUBLIC_VIDEO_URL=https://v.animethemes.moe

Without this, videos won’t play. This is required for video playback functionality.

NEXT_PUBLIC_AUDIO_URL

string

The URL from which audio files should be served.Example:

NEXT_PUBLIC_AUDIO_URL=https://a.animethemes.moe

Without this, audio files won’t play.

NEXT_PUBLIC_AUTH_PATH

string

default:"/auth"

The path to use for authentication API requests. It will be appended to NEXT_PUBLIC_API_URL.Example:

NEXT_PUBLIC_AUTH_PATH=/auth

This is fine to leave unset for development, but should be configured in production.

NEXT_PUBLIC_BASE_PATH

string

default:""

The base path the app should be hosted on. Useful if deploying to a subdirectory.Example:

NEXT_PUBLIC_BASE_PATH=/wiki

This would make the app available at https://example.com/wiki instead of https://example.com.

NEXT_PUBLIC_STAGING

boolean

default:"false"

Activate staging mode. In staging mode, a warning banner is displayed at the top of the page indicating this is a test environment.Example:

NEXT_PUBLIC_STAGING=true

When enabled, users will see a prominent warning that they’re on a staging site.

NEXT_PUBLIC_VERBOSE_LOGS

boolean

default:"false"

Enable verbose logging for debugging purposes.Example:

NEXT_PUBLIC_VERBOSE_LOGS=true

Useful during development to see detailed logs, but should be disabled in production.

NEXT_PUBLIC_PAGINATION_PAGE_SIZE

number

default:"25"

Set the page size to fetch when resolving paginated resources.Example:

NEXT_PUBLIC_PAGINATION_PAGE_SIZE=10

If not set, the default value of 25 will be used.

Complete Configuration Example

Here’s a complete .env.local file with all available options:

.env.local

# ===== Server-side =====

# The URL to the AnimeThemes API which will be used on the server.
ANIMETHEMES_API_URL=http://localhost

# Set to any truthy value to activate minimal build mode.
# In minimal build mode, only a small subset of pages get prerendered at build time.
MINIMAL_BUILD=true

# Set to any truthy value to activate the bundle analyzer.
ANALYZE=false

# Custom referer for authentication requests
AUTH_REFERER=https://animethemes.moe

# ===== Server-side + Client-side =====

# The base path the app should be hosted on.
NEXT_PUBLIC_BASE_PATH=/wiki

# The URL to the AnimeThemes API which will be used on the browser.
NEXT_PUBLIC_API_URL=https://api.animethemes.moe

# The URL from which video files should be served.
NEXT_PUBLIC_VIDEO_URL=https://v.animethemes.moe

# The URL from which audio files should be served.
NEXT_PUBLIC_AUDIO_URL=https://a.animethemes.moe

# The path to use for authentication API requests. It will be appended to NEXT_PUBLIC_API_URL.
NEXT_PUBLIC_AUTH_PATH=/auth

# Set to any truthy value to activate staging mode.
# In staging mode a warning banner is displayed at the top of the page.
NEXT_PUBLIC_STAGING=false

# To enable verbose logging.
NEXT_PUBLIC_VERBOSE_LOGS=true

# Set the page size to fetch when resolving paginated resources.
# If not set, 25 will be used.
NEXT_PUBLIC_PAGINATION_PAGE_SIZE=25

Configuration Validation

AnimeThemes Web validates your configuration on startup. The validation checks:

Required Variables

At least one of ANIMETHEMES_API_URL or NEXT_PUBLIC_API_URL must be set.If neither is set, the application will exit with an error.

Recommended Variables

The following variables trigger warnings if not set:

NEXT_PUBLIC_API_URL (if only ANIMETHEMES_API_URL is set)
NEXT_PUBLIC_VIDEO_URL (videos won’t play)
NEXT_PUBLIC_AUDIO_URL (audio won’t play)
NEXT_PUBLIC_AUTH_PATH (in production only)

Validation happens in src/utils/config.ts:28.

TypeScript Configuration

The project uses TypeScript with strict mode enabled. Key settings:

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"]
    },
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "strict": true,
    "jsx": "preserve"
  }
}

The @/* path alias resolves to the src directory, allowing clean imports like @/components/Button.

Next.js Configuration

The project uses a TypeScript-based Next.js config (next.config.ts) with these key settings:

Base Path

Configured via NEXT_PUBLIC_BASE_PATH environment variable. Useful for subdirectory deployments.

Styled Components

Server-side rendering for styled-components is enabled:

compiler: {
  styledComponents: true,
}

Security Headers

The following security headers are automatically added:

X-DNS-Prefetch-Control: on
Strict-Transport-Security
X-XSS-Protection
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
Referrer-Policy: origin-when-cross-origin

Static Generation Timeout

Set to 3600 seconds (1 hour) for complex page generation:

staticPageGenerationTimeout: 3600

URL Redirects

Automatic redirects are configured:

/wiki/blog/:slug* → /blog/:slug*
/wiki/status/:slug* → /blog/status_:slug*

Common Configuration Scenarios

Local Development

.env.local

# Use local API
ANIMETHEMES_API_URL=http://localhost:8000
NEXT_PUBLIC_API_URL=http://localhost:8000
NEXT_PUBLIC_VIDEO_URL=https://v.animethemes.moe
NEXT_PUBLIC_AUDIO_URL=https://a.animethemes.moe

# Speed up builds
MINIMAL_BUILD=true

# Enable verbose logging
NEXT_PUBLIC_VERBOSE_LOGS=true

Production Deployment

.env.production

# Use production API
ANIMETHEMES_API_URL=https://api.animethemes.moe
NEXT_PUBLIC_API_URL=https://api.animethemes.moe
NEXT_PUBLIC_VIDEO_URL=https://v.animethemes.moe
NEXT_PUBLIC_AUDIO_URL=https://a.animethemes.moe
NEXT_PUBLIC_AUTH_PATH=/auth

# Full build
MINIMAL_BUILD=false

# Disable verbose logging
NEXT_PUBLIC_VERBOSE_LOGS=false

Staging Environment

.env.staging

ANIMETHEMES_API_URL=https://staging-api.animethemes.moe
NEXT_PUBLIC_API_URL=https://staging-api.animethemes.moe
NEXT_PUBLIC_VIDEO_URL=https://v.animethemes.moe
NEXT_PUBLIC_AUDIO_URL=https://a.animethemes.moe
NEXT_PUBLIC_AUTH_PATH=/auth

# Show staging banner
NEXT_PUBLIC_STAGING=true

# Enable verbose logging for debugging
NEXT_PUBLIC_VERBOSE_LOGS=true

Subdirectory Deployment

.env.production

# Deploy to /wiki subdirectory
NEXT_PUBLIC_BASE_PATH=/wiki

NEXT_PUBLIC_API_URL=https://api.animethemes.moe
NEXT_PUBLIC_VIDEO_URL=https://v.animethemes.moe
NEXT_PUBLIC_AUDIO_URL=https://a.animethemes.moe

The app will be accessible at https://yourdomain.com/wiki.

Next Steps

Development

Learn about the development workflow and available commands

Next.js Environment Variables

Read the official Next.js documentation on environment variables

Getting Started

Architecture

Features

Components

Styling

Data Fetching

Guides

Configuration

Configuration

Environment Files

Minimal Setup

Server-Side Variables

Client-Side Variables

Complete Configuration Example

Configuration Validation

TypeScript Configuration

Next.js Configuration

Base Path

Styled Components

Security Headers

Static Generation Timeout

URL Redirects

Common Configuration Scenarios

Next Steps

Development

Next.js Environment Variables

Build docs developers (and LLMs) love

Getting Started

Architecture

Features

Components

Styling

Data Fetching

Guides

​Configuration

​Environment Files

​Minimal Setup

​Server-Side Variables

​Client-Side Variables

​Complete Configuration Example

​Configuration Validation

​TypeScript Configuration

​Next.js Configuration

​Base Path

​Styled Components

​Security Headers

​Static Generation Timeout

​URL Redirects

​Common Configuration Scenarios

​Next Steps

Development

Next.js Environment Variables

Build docs developers (and LLMs) love

Configuration

Environment Files

Minimal Setup

Server-Side Variables

Client-Side Variables

Complete Configuration Example

Configuration Validation

TypeScript Configuration

Next.js Configuration

Base Path

Styled Components

Security Headers

Static Generation Timeout

URL Redirects

Common Configuration Scenarios

Next Steps