Guides

Installation

Detailed installation instructions for Next.js, React, and static sites.

Package Installation

Install IndieFooter using your preferred package manager:

NPM

npm install indie-footer

Yarn

yarn add indie-footer

PNPM

pnpm install indie-footer

Next.js Installation

For Next.js 13+ (App Router):

app/layout.tsx
import { IndieFooter } from 'indiefooter';
import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <IndieFooter if_key={process.env.NEXT_PUBLIC_INDIEFOOTER_KEY} />
      </body>
    </html>
  );
}

For Next.js with Pages Router:

pages/_app.tsx
import { IndieFooter } from 'indiefooter';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <IndieFooter if_key={process.env.NEXT_PUBLIC_INDIEFOOTER_KEY} />
    </>
  );
}

export default MyApp;
Make sure to add your API key to .env.local file.

React Installation

For Create React App or Vite projects:

src/App.jsx
import { IndieFooter } from 'indiefooter';

function App() {
  return (
    <div className="App">
      <header>
        <h1>My App</h1>
      </header>
      
      <main>
        {/* Your content */}
      </main>
      
      <IndieFooter if_key={import.meta.env.VITE_INDIEFOOTER_KEY} />
    </div>
  );
}

export default App;

Environment Variables

Store your API key securely in environment variables:

Next.js

.env.local
NEXT_PUBLIC_INDIEFOOTER_KEY=IF_your_api_key_here

Vite / Create React App

.env
VITE_INDIEFOOTER_KEY=IF_your_api_key_here
Important: Add .env.local and .env to your .gitignore file.

Verify Installation

Start your development server and check the footer:

# Next.js
npm run dev

# React/Vite
npm run dev

Open your browser and scroll to the bottom of the page. You should see the IndieFooter component loaded.

Success! If you see the footer, you're all set. If not, check the troubleshooting guide.
Previous: Quick startNext: API Keys