Next.js Setup

Configure Next.js to work with MagenX404

Overview

MagenX404 publishes TypeScript source files, which requires Next.js to be configured to transpile the package.

Quick Setup

Add this to your next.config.js or next.config.mjs:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["magenx404"],
};

export default nextConfig;

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["magenx404"],
};

export default nextConfig;

Next.js 13+ (App Router)

The above configuration works for Next.js 13+ with the App Router. No additional setup needed.

Next.js 12 (Pages Router)

For Next.js 12, use this webpack configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.extensionAlias = {
      ".js": [".ts", ".tsx", ".js", ".jsx"],
      ".jsx": [".tsx", ".jsx"],
    };
    return config;
  },
};

module.exports = nextConfig;

TypeScript Configuration

Make sure your tsconfig.json includes the package:

{
  "compilerOptions": {
    // ... your config
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "node_modules/magenx404/**/*"
  ]
}

Verification

After configuration:

1. Restart your Next.js dev server:

   npm run dev
   

2. Test the import:

   import { X404Blacklist } from "magenx404/blacklist";
   

3. If you see errors, clear the cache:

   rm -rf .next
   npm run dev
   

Using in Client Components

Since MagenX404 uses browser APIs (wallet connections, localStorage), you must use it in Client Components:

"use client";

import { X404Blacklist } from "magenx404/blacklist";

export function AuthComponent() {
  // Your component code
}

The "use client" directive is required when using MagenX404 features in Next.js App Router components.

Using in Server Components

You cannot directly use MagenX404 features in Server Components since they require browser APIs. However, you can:

1. Create a Client Component wrapper
2. Use the Client Component in your Server Component

// app/page.tsx (Server Component)
import { AuthButton } from "./components/AuthButton";

export default function Page() {
  return <AuthButton />;
}

// components/AuthButton.tsx (Client Component)
"use client";

import { X404Blacklist } from "magenx404/blacklist";

export function AuthButton() {
  // Your authentication logic
}

Troubleshooting

”Module not found” errors

1. Verify transpilePackages is configured:

   transpilePackages: ["magenx404"];
   

2. Restart the dev server:

   # Stop the server (Ctrl+C)
   npm run dev
   

3. Clear Next.js cache:

   rm -rf .next
   

4. Reinstall the package:

   rm -rf node_modules/magenx404
   npm install
   

Type errors

1. Check tsconfig.json includes the package:

   {
     "include": ["node_modules/magenx404/**/*"]
   }
   

2. Verify TypeScript can find types:

   import type { X404AuthResult } from "magenx404";
   

Build errors

1. Update Next.js to latest version:

   npm install next@latest
   

2. Ensure TypeScript version is compatible:

   npm install typescript@latest
   

Alternative: next-transpile-modules (Legacy)

If the above doesn’t work, you can use next-transpile-modules:

npm install --save-dev next-transpile-modules

const withTM = require("next-transpile-modules")(["magenx404"]);

module.exports = withTM({
  // your other Next.js config
});

This is a legacy approach. The transpilePackages option is preferred for Next.js 13+.

Next Steps

Quick Start

Start using MagenX404 in your Next.js app

Features

Explore available authentication features