Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/gus-16710/invitations/llms.txt

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

Invitaciones Digitales is built as a fully static Next.js site. Every configuration decision — from how routes are exported to how styles are compiled — is designed to produce a self-contained out/ directory that can be uploaded to any standard web host without a Node.js server. This page documents every configuration file in the project so you understand what each option does and why changing it could break the deployment pipeline.

​
next.config.js

The Next.js configuration file lives at the project root and controls how the framework builds and exports the application.
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

​
Option reference

output: 'export' Tells Next.js to produce a fully static HTML export instead of a server-rendered application. When this option is set, running next build writes all pages as plain .html files (plus their CSS, JavaScript, and assets) into the out/ directory. No Node.js process is needed to serve the result — the folder can be served directly from any FTP host, CDN, or object-storage bucket. trailingSlash: true Forces every route to be output as index.html inside a named directory rather than a bare .html file. For example:
RouteOutput file
/out/index.html
/bodas/diana-ernesto/out/bodas/diana-ernesto/index.html
/quinces/daniela/out/quinces/daniela/index.html
This matches the way most shared-hosting servers resolve URLs — a request to /quinces/daniela/ is served by the index.html in that directory, so no .htaccess rewrite rules are required. images: { unoptimized: true } Next.js’s built-in <Image> component normally relies on a server-side optimization API (/_next/image) to resize and convert images on the fly. That API is unavailable in a static export, so unoptimized: true disables it. Images are served as-is from the public/ directory without any server-side processing.
Removing output: 'export' would switch the project to server-side rendering and break the GitHub Actions FTP deployment pipeline entirely. The out/ directory would no longer be generated, and the site would require a Node.js runtime to run. Only remove this option if you are migrating to a platform that supports Next.js server rendering (e.g., Vercel or a custom Node.js server).

​
tailwind.config.ts

Tailwind CSS is configured with two additional UI plugin libraries — NextUI and Flowbite — that together cover the component needs of every invitation template.
tailwind.config.ts
import type { Config } from "tailwindcss";
import { nextui } from "@nextui-org/react";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    //
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
    "./node_modules/flowbite-react/**/*.js",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui(), require("flowbite/plugin")],
};
export default config;

​
Configuration details

content paths Tailwind performs tree-shaking by scanning these glob patterns for class names at build time. Any class not found in these files is stripped from the final CSS bundle.
  • ./src/pages/**/* — legacy Pages Router files (kept for compatibility).
  • ./src/components/**/* — shared UI components used across all invitations.
  • ./src/app/**/* — all App Router pages and layouts.
  • ./node_modules/@nextui-org/theme/dist/**/* — NextUI’s own internal class names, which would otherwise be purged because they live outside src/.
  • ./node_modules/flowbite-react/**/*.js — Flowbite React’s class names, included for the same reason.
NextUI plugin (nextui()) NextUI provides accessible, beautifully styled React components (modals, buttons, cards, etc.) used in the invitation UI. The nextui() plugin injects its design tokens and component styles into the Tailwind pipeline. Flowbite plugin (require("flowbite/plugin")) Flowbite adds extra utility classes and interactive component styles (carousels, accordions, tooltips) that complement Tailwind’s base utilities. The flowbite-react package is also listed in content so its class names survive purging. darkMode: "class" Dark mode is toggled by adding the dark class to a parent element rather than relying on the operating-system prefers-color-scheme media query. This gives the invitation templates full programmatic control over the color theme. theme.extend The theme extension is currently empty — all visual customization is delegated to the NextUI and Flowbite design systems. Custom tokens (colors, fonts, spacing) can be added here without overriding the base Tailwind theme.

​
tsconfig.json

The TypeScript compiler configuration uses Next.js’s recommended strict settings plus a single path alias that simplifies imports across the codebase.
tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".next/dev/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

​
Path alias: @/*

The "@/*": ["./src/*"] mapping creates a project-root-style alias for everything inside the src/ directory. This means you can write clean absolute imports anywhere in the codebase instead of fragile relative paths: 
// ✅ Using the alias — works from any file depth
import SmoothScroll from "@/components/SmoothScroll";
import { Providers } from "@/app/provider";

// ❌ Equivalent relative import — brittle and hard to maintain
import SmoothScroll from "../../components/SmoothScroll";
@/components/SmoothScroll resolves to ./src/components/SmoothScroll, @/app/provider resolves to ./src/app/provider, and so on for every module under src/.

​
postcss.config.js

PostCSS processes all CSS through Tailwind’s utility generator and Autoprefixer before the browser receives it.
postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
tailwindcss — runs the Tailwind CSS build, consuming tailwind.config.ts to generate the utility class stylesheet. autoprefixer — automatically adds vendor prefixes (e.g., -webkit-, -moz-) to CSS properties that require them for cross-browser compatibility, based on the browserslist targets.
The postcss package version is explicitly pinned using an overrides entry in package.json:
package.json (excerpt)
"overrides": {
  "postcss": "^8.5.10"
}
This override forces all transitive dependencies that declare postcss as a peer or indirect dependency to resolve to ^8.5.10, preventing version conflicts between PostCSS 8 and older sub-dependency ranges that might otherwise resolve to an incompatible version.

Build docs developers (and LLMs) love

Get started for freeTalk to us