⚛️ Next.js Setup

Create a new Next.js project

Commands

Refer to the Next.js documentation

npx create-next-app my-app

cd my-app

# optional styling libraries
npm i -D @tailwindcss/typography daisyui

# install Stripe
npm i stripe @stripe/stripe-js

npm run dev

Code

Add Environment Variables to your .env.local file.

file_type_config .env.local 
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_
STRIPE_SECRET_KEY=sk_test_
STRIPE_WEBHOOK_SECRET=whsec_

Remove the Next.js boilerplate.

app/page.tsx 
export default function Home() {
  return (
    <main>

    </main>
  );
}

Optionally, update your Tailwdind configuration to include the DaisyUI and Tailwind Typography plugins for rapid styling.

tailwind.config.ts 
import type { Config } from "tailwindcss";
import daisyui from 'daisyui';
import tailwindTypography from '@tailwindcss/typography';

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {

  },
  plugins: [
    tailwindTypography,
    daisyui,
  ],
};
export default config;

Questions? Let's chat

Open Discord