Setting Up NextReady

Prerequisites

Before you begin setting up NextReady, ensure you have the following installed on your machine:

• Node.js (v18 or higher) - Download
• npm, yarn, or pnpm - Install Yarn or Install pnpm
• Git - Download

You'll also need accounts with the following services:

• MongoDB Atlas - Sign up (for database)
• Stripe - Sign up (for payment processing)
• Resend - Sign up (for email services)
• Google Cloud Platform - Sign up (for Google authentication)

Project Setup

Clone the Repository

First, clone the NextReady repository from GitHub to your local machine:

git clone https://github.com/your-username/nextready.git cd nextready

Install Dependencies

Install all the required dependencies using npm, yarn, or pnpm:

# Using npm npm install # Using yarn yarn install # Using pnpm pnpm install

legacy-peer-deps=true

Environment Variables

NextReady requires several environment variables to function properly. Create a .env.local file in the root of your project with the following variables:

# App NEXT_PUBLIC_APP_URL=http://localhost:3000 # MongoDB MONGODB_URI=your_mongodb_connection_string # NextAuth NEXTAUTH_SECRET=your_nextauth_secret NEXTAUTH_URL=http://localhost:3000 # Google Authentication GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret # Stripe STRIPE_SECRET_KEY=your_stripe_secret_key STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret STRIPE_PRICE_ID=your_stripe_price_id # Email (Resend) RESEND_API_KEY=your_resend_api_key

Generating a NextAuth Secret

You can generate a secure random string for your NEXTAUTH_SECRET using this command:

openssl rand -base64 32

MongoDB Setup

NextReady uses MongoDB directly (without Prisma ORM) for data storage. Follow these steps to set up your MongoDB database:

Create a MongoDB Atlas Cluster

1. Sign in to MongoDB Atlas
2. Create a new project (if you don't have one already)
3. Build a new cluster (the free tier is sufficient for development)
4. Under "Database Access," create a new database user with read and write privileges
5. Under "Network Access," add your IP address or allow access from anywhere for development
6. Once your cluster is created, click "Connect" and select "Connect your application"
7. Copy the connection string and replace <password> with your database user's password
8. Add this connection string as the MONGODB_URI in your .env.local file

Authentication Setup

NextReady uses NextAuth.js for authentication, which supports both credentials (email/password) and Google OAuth.

Setting Up Google Authentication

To enable Google authentication:

1. Go to the Google Cloud Console
2. Create a new project or select an existing one
3. Navigate to "APIs & Services" > "Credentials"
4. Click "Create Credentials" and select "OAuth client ID"
5. Configure the consent screen if prompted
6. For the application type, select "Web application"
7. Add authorized JavaScript origins: http://localhost:3000 (for development) and your production URL
8. Add authorized redirect URIs: http://localhost:3000/api/auth/callback/google (for development) and https://your-production-domain.com/api/auth/callback/google (for production)
9. Click "Create" and note your Client ID and Client Secret
10. Add these values to your .env.local file as GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET

Email/Password Authentication

Email/password authentication is already configured in the project. Users can register and log in using their email and password. The passwords are securely hashed using bcrypt before being stored in the database.

Stripe Setup

NextReady integrates with Stripe for payment processing. Follow these steps to set up Stripe:

Create a Stripe Account

1. Sign up for a Stripe account if you don't have one
2. In the Stripe Dashboard, ensure you're in test mode (toggle in the top-right corner)
3. In the Stripe Dashboard, go to "Developers" > "API keys"
4. Copy your "Secret key" and "Publishable key"
5. Add these to your .env.local file as STRIPE_SECRET_KEY and STRIPE_PUBLISHABLE_KEY

Create a Stripe Product and Price

1. In the Stripe Dashboard, go to "Products" > "Add product"
2. Enter product details (name, description, etc.)
3. Add pricing information (one-time or recurring)
4. Click "Save product"
5. Find the Price ID for the product you created (it starts with "price_")
6. Add this Price ID to your .env.local file as STRIPE_PRICE_ID

Set Up Stripe Webhooks

Webhooks allow Stripe to notify your application when events occur, such as successful payments:

1. In the Stripe Dashboard, go to "Developers" > "Webhooks"
2. Click "Add endpoint"
3. For local development, you can use a tool like Stripe CLI to forward webhooks to your local server
4. For production, enter your webhook URL: <code>https://your-domain.com/api/webhooks/stripe</code>
5. Select the events to listen for (at minimum: <code>checkout.session.completed</code>, <code>customer.subscription.created</code>, <code>customer.subscription.updated</code>, <code>customer.subscription.deleted</code>)
6. Click "Add endpoint" and copy the signing secret
7. Add this to your .env.local file as STRIPE_WEBHOOK_SECRET

Email Setup

NextReady uses Resend for sending transactional emails. Follow these steps to set up email functionality:

Create a Resend Account

1. Sign up for a Resend account
2. Verify your domain or use the provided sandbox domain for testing
3. Create an API key in the Resend dashboard
4. Add this API key to your .env.local file as RESEND_API_KEY

Email templates are located in the src/services/email-service.ts file. You can customize these templates to match your branding.

Internationalization Setup

NextReady supports multiple languages using next-intl. The supported languages are:

• English (en)
• French (fr)
• Spanish (es)
• German (de)

Language Configuration

The internationalization is already set up in the project. The routing structure uses subpaths (/en, /fr, etc.) to differentiate between language versions of the site.

Translation files are located in the messages directory at the root of the project. Each language has its own subdirectory with JSON files containing the translations.

Running the Project

Once you've set up all the required environment variables and configurations, you can start the development server:

# Using npm npm run dev # Using yarn yarn dev # Using pnpm pnpm dev

Your NextReady application should now be running at http://localhost:3000.

Creating an Admin User

To access the admin dashboard, you'll need to create an admin user:

1. Register a new user through the sign-up page
2. Access your MongoDB database (through MongoDB Atlas or another tool)
3. Find the user document in the "users" collection
4. Add a role field with the value "admin" to the user document

Once the user's role is set to "admin", you'll be able to access the admin dashboard and manage blog posts, contacts, and other features.

Deployment

NextReady can be deployed to various platforms. Here's how to deploy to Vercel, which is recommended for Next.js applications:

Deploying to Vercel

1. Push your project to a Git repository (GitHub, GitLab, or Bitbucket)
2. Sign up for a Vercel account
3. Click "New Project" and import your repository
4. Configure your project settings (you can leave most as default)
5. Add all your environment variables from .env.local to the Vercel project settings
6. Update NEXTAUTH_URL and NEXT_PUBLIC_APP_URL to your production URL
7. Click "Deploy"

After Deployment

After deploying your application:

1. Update your Google OAuth redirect URIs to include your production URL
2. Update your Stripe webhook endpoint to your production webhook URL
3. Test the authentication, payment, and internationalization features in the production environment