SKSilvan Kohler • September 15, 2024 • 2 min read

Getting started with Next.js on Shiper

Tags: nextjs react deployment shiper

Next.js has become a go-to React framework for building modern web applications. In this guide, we'll walk you through deploying a Next.js application on Shiper, streamlining your journey from development to production.

Prerequisites

Before we begin, ensure you have:

1. A GitHub account
2. A Shiper account (sign up at shiper.app using your GitHub account)
3. Basic knowledge of Next.js and Git(Hub)

Step 1: Prepare Your Next.js Application

If you don't have an existing project, create a new one:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app

Step 2: Configure Your Next.js App for Shiper

Open your next.config.js file and add the following configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
};

module.exports = nextConfig;

This crucial configuration ensures your Next.js app is compatible with Shiper's deployment platform.

Step 3: Push Your Code to GitHub

Initialize a Git repository and push your code:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/my-nextjs-app.git
git push -u origin main

Step 4: Deploy Your Next.js App on Shiper

To deploy your Next.js application on Shiper:

1. Log in to your Shiper dashboard
2. Click on "Add project"
3. Select your GitHub repository
4. Choose "Next.js" as your framework
5. Select a resource template (e.g., "Small") or customize the resources as needed in the advanced settings
6. Click "Deploy"

Shiper will now build and deploy your Next.js application. You can monitor the deployment progress in real-time from the project dashboard you are redirected to.

Step 5: Environment Variables (Optional)

If your Next.js app requires environment variables:

1. Go to your project settings in Shiper
2. Navigate to the "Variables" section
3. Add your variables, specifying which environments (production, preview, or both) they apply to

Shiper securely stores your environment variables and ensures they are available to your app during deployment.

Step 6: Custom Domain Setup (Optional)

To use a custom domain for your Next.js app:

1. Go to your project settings in Shiper
2. Navigate to the "Domains" section
3. Add your custom domain
4. Update your domain's DNS settings as instructed

Shiper provides automatic HTTPS for all domains, including custom ones.

Additional Features

• Preview Deployments: Shiper automatically creates preview deployments for pull requests and branches, allowing you to test changes before merging.
• Resource Management: You can adjust CPU and memory allocations for your app as needed in the project settings.
• Analytics: Shiper provides built-in analytics for your deployments, helping you monitor performance and usage.
• Collaboration: Invite team members to your Shiper projects to collaborate on deployments.
• Logs: View real-time logs for your deployments to troubleshoot issues quickly.

Conclusion

You've successfully deployed your Next.js application on Shiper! Your app is now live, secure, and ready to scale. Enjoy the simplicity and power of deploying Next.js with Shiper, and focus on what matters most - building great features for your users.

Remember, Shiper automatically deploys updates whenever you push changes to your GitHub repository, ensuring your production app always reflects your latest code.

Happy coding!