Create a Next.js App and Convert It to the App Router with Cursor AI

We will show how to create a Next.js example app and convert it to the app router with the help of the Cursor AI composer. We will also extend the code by adding a new card pointing to this blog post.

Step 1: Sign into vocon cloud and start Cursor AI

Go to cloud.vocon-it.com/products and click the button in the Cursor AI card.

Sign in or log into vocon cloud via Google or GitHub (recommended). The Cursor AI application opens within a virtual desktop within the browser.

Step 2: Open the Terminal

Open Application ? Terminal.

In the cursor window, click „Continue“ and „Continue,“ then log in or sign up, depending on whether you already have a Cursor account or not. Follow the instructions in the browser window and return to the cursor window if you are not automatically redirected. If the process takes too long, you might need to log in a second time.

Once you’re inside Cursor AI on vocon cloud, register if you have not already.

Step 4: Create the Next.js Project

Then create the project:

cd ~/CursorProjects
PROJECT=nextjs-blog
npx create-next-app@latest "${PROJECT}" --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
cd "${PROJECT}"

While the project is being created, open the new folder via File ? Open Folder, navigate to the project at /home/kasm/CursorProjects/<project-name> (e.g. nextjs-blog), and click „Open.“

Step 3: Install the Node Version specified in .nvmrc

Open a terminal (New Terminal or press Ctrl + Shift + `).

Make sure you have required node version installed:

[ -r .nvmrc ] && nvm install $(head -1 .nvmrc) || nvm install --lts

Step 5: Install the Project

npm i

Step 6: Start the Development Server

Once the project is created, start the dev server:

npm run dev

Then open http://localhost:3000 in a browser. You can right-click the link in the terminal and choose „Open link“ to do so.

Step 7: Install the App Router

Open the composer with Ctrl+I and type:

# Ctrl+I
Composer> Install and use the app router

Then „Accept all“.

Step 8 Resolve Conflicts

If you see „Conflicting app and page file,“ run the following commands:

rm -rf pages
# restart the development server by stopping the old one by Ctrl+C and:
npm run dev

The page may display an error in the lower left. Copy the error message and send it to the composer:

Composer> I get the following console error:
          Error: A tree hydrated ...

Then choose „Accept all“ in the composer. The page should now load without any errors.

Step 9: Add a new card

Next, use the composer to add a card pointing to a blog post:

Composer> Add a card pointing to a blog post that shows how to convert a Next.js project from page router to app router using Cursor AI. Use the link https://vocon-it.com/?p=7034.

Then „Accept all“.

The new card should show up after reloading the page.

Step 10: Update the page title

Finally, update the page title:

Composer> Use a title that points out that the page has been migrated to app router using Cursor AI.

Accept the presented solution.

The Page now looks like follows:

DONE!

Conclusion

With the help of Cursor AI on vocon cloud, we demonstrated how to create a Next.js app and successfully migrate it to the app router. Throughout this process, we utilized the Cursor AI Composer to perform the required refactoring, to resolve conflicts, add new functionality. By leveraging Cursor AI, developers can significantly reduce the time spent on these tasks and focus more on building features. Whether you’re working on small projects or large-scale applications, the combination of Next.js and Cursor AI proves to be an efficient toolset for modern web development.

Happy coding!