Loading...
biz499 Createx Logo
Contact us

Deploying a Full-Stack Project with Vercel and Sanity: A Step-by-Step Guide

4 min read

"Ready to take your Next.js project live? Let’s turn your code into a fully deployed masterpiece with just a few simple steps!"

 

Step 1: Open Your Next.js Project in Visual Studio Code


Begin by launching your Next.js project in Visual Studio Code. Once the project is open, open a new terminal within VS Code to proceed with the deployment process.

Deploying Your Next.js Project to Vercel and Sanity

After preparing your Next.js project in Visual Studio Code, the next steps involve setting up your environment and resolving any potential errors during the process. Let’s dive into the details.

Step 2: Run Your First Command in the Terminal: 

To begin, navigate to the terminal in VS Code and run the following command: npm install

Potential Issue: If you encounter an error indicating the absence of a package.json file (e.g., npm cannot find a package.json file in the C:\broccoli directory), don’t worry—this file is crucial for managing project dependencies, and here’s how you can create it:

Resolving the Missing package.json File Issue

1. Create a package.json File

Run one of these commands in your terminal: npm init / npm init --yes

 

2. Verify the package.json File

After creating the file, open it in your editor to ensure it contains the required fields. It should look something like this:

 

3. Install Dependencies

Once the package.json file is ready, install the necessary dependencies: npm install

Ensure Next.js and its dependencies are installed with this command: npm install next react react-dom

Now you can run the command : npm install

 

Step 3: Start the Development Server

Once all dependencies are installed, launch the development server to verify everything is working: npm run dev

You should see your Next.js application running at: http://localhost:3000 

 
Step 4: Initialize Git for Version Control

If you haven’t already set up Git for your project, initialize it with the following commands: 

  • git init
  • git add .
  • git commit -m "Initial commit"

Step 5: Deploying to Vercel

Why Vercel?
Vercel is an excellent platform for hosting Next.js applications, providing seamless deployment and powerful features. Follow these steps to deploy:

1. Install the Vercel CLI

First, install the Vercel CLI globally: npm install -g vercel

2. Login to Vercel

Log in to your Vercel account using the CLI: vercel login

You can continue as you want but Github is more suggested as we will be connecting our github repository for better experience.

3. Link Your Repository

After logging in, Vercel will prompt you to link your Next.js project to a GitHub repository. Choose Yes to enable the following benefits:

Advantages of Linking to a Git Repository

  • Version Control: Track changes and revert to previous versions if needed.
  • Collaboration: Work with your team seamlessly.
  • Automated Deployment: Deploy changes automatically when code is pushed.
  • Testing & Branching: Test features on separate branches without affecting the main branch.
  • CI/CD Integration: Automate testing, building, and deployment.

Alternatives to Git Integration

If you choose not to link your project to Git, you can explore other deployment methods:

  1. Manual Deployment:
    Build your application locally using: npm run build

    Then manually upload the generated .next directory files to a server.

  2. FTP/SFTP:
    Use FTP/SFTP for traditional hosting providers.

  3. Docker:
    Package your application in a Docker container for deployment.

Conclusion

Linking your project to a Git repository and deploying it to Vercel streamlines the development workflow and enhances collaboration. However, you can opt for manual deployment methods if needed.

 

Connecting Your Git Repository to Your Vercel Project

To deploy your Next.js project seamlessly to Vercel, the first step is connecting your GitHub repository. Let’s break it down:

 

Step 1: Create a GitHub Repository

  • Start by creating a new repository on GitHub.
  • Ensure the repository is set to public for smoother integration.

⚠️ Important:
Ensure your repository is not empty. Push all your project files before proceeding to avoid issues when connecting to Vercel.

Push Your Project Files to GitHub

In your terminal, navigate to your project directory and execute the following commands:

  1. Initialize Git: git init

  2. Stage all files: git add .

  3. Add the remote repository: git ls-remote https://github.com/<your-username>/<repository-name>.git

  4. Push your files to the master/main branch:git push origin master

Step 3: Link Your Repository to Vercel

  1. Open the Vercel Dashboard.
  2. Click on New Project.
  3. Select Link a Repository.
  4. Fill in the required information (e.g., project name, build settings).
  5. Confirm the repository connection.

Once completed, your GitHub repository will be linked to Vercel, and you're ready to deploy your Next.js project!

Set Up Sanity for Content Management

Sanity is a powerful headless CMS that seamlessly integrates with Next.js, allowing you to manage content efficiently. Here’s how to set it up in your project:

Step 1: Install Sanity CLI

First, install the Sanity CLI globally: npm install -g @sanity/cli

Step 2: Initialize a Sanity Project

Create a new Sanity project by running the following command:sanity init

Follow the prompts to set up your project:

  • Choose a project name.
  • Select a dataset configuration (e.g., "production").
  • Install default schemas or customize them as needed.

 

 

Set Up Sanity for Content Management

Sanity is a powerful headless CMS that seamlessly integrates with Next.js, allowing you to manage content efficiently. Here’s how to set it up in your project:

Step 3: Connect Sanity to Your Next.js App

In your Next.js project, you need to install the Sanity client: npm install @sanity/client

Create a Sanity Client Instance

You should create a new file named sanity.js in your lib directory to configure and export the Sanity client. Here’s how it should look:

Step 4: Use the Client in Your Next.js Pages

Now, you can use the Sanity client to fetch data in your Next.js pages. For example, in your index.js file, you can import the client and fetch the necessary data as follows:

File Structure Overview

Your project structure should look like this:


Note: Make sure to replace 'yourProjectId' with your actual Sanity project ID. After setting this up, run your Next.js application, and it should fetch and display the posts from Sanity correctly. If you have any further questions or need more assistance, feel free to ask!

 
 

 

 

 

 

Tags: