What's included:

✔️ Next.js 13 – starter package with project structure, configuration, and SSR.

✔️ SEO-friendly React + Typescript full-stack site with minimalistic design.

✔️ Firebase Authentication workflows with public and protected pages.

✔️ ChatGPT integration.

✔️ Serverless API with Cloud functions.

✔️ Firebase Firestore database integration.

✔️ Firebase Storage access with custom claims.

✔️ TailwindCSS.

✔️ Vercel.com cloud deployment ready.

✔️ Stripe.com payments integration.

✔️ Google Analytics.

✔️ Setup instructions and this site codebase.

✔️ For personal and commercial project or simply for learning.

to purchase the package.

🚀 Getting Started

Download and extract .zip file to the project directory.
Ensure Node.js is installed.
Run npm install.
Run npm run dev, open http://localhost:3000 in your browser.

💬 ChatGPT

Copy and paste your OPENAI_API_KEY and OPENAI_ORGANIZATION variables to .env file.
Sign in to access the protected page and try ChatGPT integration.

🔥 Firebase setup

Authentication providers:

Go to Firebase console and create a project.
Authentication -> Sign-in methods: enable Email/Password and Google sign-in providers.
Authentication -> Settings -> Add domain: add localhost to allowed domains.
Authentication -> Templates -> Password reset -> Customize action URL: add http://localhost:3000.

Firestore database setup:

Create database with production mode.

Firebase application setup:

Project settings -> General: create a new web-application.
Project settings -> Service account -> Generate new private key.
In the project folder, you can see env.example file, rename it to .env.
Copy and paste your SDK configuration and Service account variables to .env file.

Notice: variables prefixed as NEXT_PUBLIC are public and automatically exposed to the browser, otherwise variables are private and used for the server-side. Private variables secured by Next.js framework. Make sure you added the .env file to .gitignore.

☁️ Cloud functions

Vercel provides a serverless functions that allows to run code on-demand in response to incoming HTTP requests without having to manage infrastructure. Read more about Edge functions.

Any file inside ./pages/api/ folder is mapped to /api/* and will be treated as an API endpoint instead of a page. Those functions are server-side only and won't increase your client-side bundle size.

Check out ./pages/api/edge.ts

/* This example shows how to use the request.geo
   object to determine a user's location. */

export const config = {
  runtime: 'edge',
};

const edge = async (req: NextRequest) => {
  const { nextUrl: url, geo } = req;
  const country = geo?.country || 'US';
  const city = geo?.city || 'San Francisco';
  const region = geo?.region || 'CA';
  const countryInfo = countries.find((x) => x.cca2 === country);
  const flag = countryInfo?.flag;

  return NextResponse.json({ url, country, region, city, flag });
};

export default edge;

💳 Stripe

Stripe with Firebase:

This extension syncs customers’ subscription status with your Cloud Firestore and adds custom claims using Firebase Authentication for convenient access control in your application.

Stripe extension setup:

Create an account at the Stripe.com.
Switch to test mode.
Create a test product and price at the Stripe dashboard.
Create Restricted key with write access to Customers, PaymentIntents and Products.
Add your Stripe Restricted API key as variable NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, and your Stripe Secret key as STRIPE_SECRET_KEY to the .env file.
Add your test product's price id as NEXT_PUBLIC_STRIPE_PRICE to the .env file.
Go to Firebase console.
Extension -> Explore extensions marketplace: install Run Payments with Stripe extension.
Extension -> Run Payments with Stripe -> Extension configuration: Setup Webhooks, API keys, Events and Security rules following How this extension works guide.
Use 4242 4242 4242 4242 as credit card number any expiration date and cvc code.

📦 Firebase Storage

Whenever user made a subscription, custom claims added to Authentication token to allow access to Storage files.
Check out ./firebase/serverUserSessionUtils.ts

if (isSubscriber) {
  await getAuth().setCustomUserClaims(authData.uid, { subscriber: true });
}

Storage -> Rules: add security rule to grant access to Storage with custom claim subscriber.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow write: if false;
      allow read: if request.auth.token.subscriber == true;
    }
  }
}

Storage files access controlled by custom claims attribute.

🚚 Deploy

Vercel cloud platform:

Vercel is a cloud platform that makes it easy to deploy and host web projects, including static sites and serverless functions.

Vercel CLI setup:

Run npm install -g vercel.
Run vercel login and to follow the command line instructions.
Deploy to Vercel's cloud vercel --prod.
Go to https://vercel.com/dashboard to manage your deployment and domains.

Email: hello.nextjs@gmail.com