2. Настраиваем проект — курс «Создаем сайт с помощью AI» — Вайбкэмп

Introduction

In this tutorial, we will walk through the process of setting up a Next.js project, integrating Cursor, organizing GitHub branches, and configuring deployment with Vercel. This guide is designed to help you create a structured web project using AI tools efficiently.

Step 1: Create a Next.js Project

1. Initialize the Project

   • Open your terminal and navigate to the directory where you want to create your project.
   • Run the following command to create a new Next.js application:

     npx create-next-app@latest your-project-name
     

   • Replace your-project-name with your desired project name.

2. Navigate to Your Project Directory

   • Change into the newly created project directory:

     cd your-project-name
     

3. Start the Development Server

   • Launch the development server to see your application in action:

     npm run dev
     

   • Open your browser and go to http://localhost:3000 to view your Next.js app.

Step 2: Integrate Cursor

1. Install Cursor

   • In the terminal, run the following command to add Cursor to your project:

     npm install cursor
     

   • This package will enable collaborative coding features.

2. Set Up Cursor

   • Follow the setup instructions provided by the Cursor documentation to integrate it into your project effectively.

Step 3: Configure GitHub

1. Create a GitHub Repository

   • Go to GitHub and create a new repository for your project.
   • Make sure to initialize it with a README file.

2. Link Your Local Project to GitHub

   • In your terminal, link the local repository to GitHub:

     git init
     git add .
     git commit -m "Initial commit"
     git remote add origin https://github.com/yourusername/your-repo-name.git
     git push -u origin master
     

   • Replace yourusername and your-repo-name with your GitHub username and repository name.

3. Organize Branches

   • Create a development branch for ongoing work:

     git checkout -b development
     

   • Push this branch to GitHub:

     git push -u origin development
     

Step 4: Set Up Vercel for Deployment

1. Create a Vercel Account

   • Sign up at Vercel if you don't already have an account.

2. Link Your GitHub Repository

   • After signing in, click on the "New Project" button and select your GitHub repository.
   • Vercel will automatically configure the deployment settings.

3. Deploy Your Application

   • Click on "Deploy" to push your application live.
   • Vercel will provide you with a URL to access your deployed application.

Conclusion

You have successfully set up a Next.js project, integrated Cursor for collaborative coding, organized your GitHub repository, and configured Vercel for easy deployment. With these steps, you can efficiently build and showcase your web applications. As a next step, consider exploring advanced features of Next.js or adding more functionalities to your project.