As you approach deployment, it's crucial to ensure your Next.js application is securely configured and that sensitive information, like your Stripe API keys, is managed appropriately. This section will guide you through the essential steps for preparing your app for a production environment.
One of the most critical aspects of deployment is managing your environment variables. These variables allow you to configure your application's behavior based on the environment it's running in (e.g., development, staging, production). For Stripe, you'll need your publishable and secret keys.
Next.js provides built-in support for environment variables. You can define them in a .env.local file in your project's root. For production, these variables will be injected by your hosting provider. It's a best practice to prefix your Stripe-related environment variables with NEXT_PUBLIC_ for variables that need to be exposed to the client-side, and without it for server-side only variables.
# .env.local (for local development)
STRIPE_SECRET_KEY=sk_test_YOUR_SECRET_KEY
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_YOUR_PUBLISHABLE_KEYIn your Stripe integration code, you'll access these variables using process.env.
import { loadStripe } from '@stripe/stripe-js';
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
// On the server (e.g., API routes)
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);For security, never commit your .env.local file or any files containing your secret keys to version control. Use a .gitignore file to prevent this.
# .gitignore
.env.local
.env.development.local
.env.production.localWhen deploying to a platform like Vercel, Netlify, or any other cloud provider, you'll configure these environment variables directly in their dashboard or through their CLI. For production, ensure you use your Stripe live API keys, not the test keys.