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.

Cursor AI Card on vocon cloud

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:

Welcome to Next.js - Migrated to App Router with Cursor AI

 

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!

27 comments

  4. I loved as much as youll receive carried out right here The sketch is tasteful your authored material stylish nonetheless you command get bought an nervousness over that you wish be delivering the following unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this hikeHABANERO88

    Antworten

  5. I do trust all the ideas youve presented in your post They are really convincing and will definitely work Nonetheless the posts are too short for newbies May just you please lengthen them a bit from next time Thank you for the postHABANERO88

    Antworten

  6. I do agree with all the ideas you have introduced on your post They are very convincing and will definitely work Still the posts are very short for newbies May just you please prolong them a little from subsequent time Thank you for the postHABANERO88

    Antworten

  7. helloI really like your writing so a lot share we keep up a correspondence extra approximately your post on AOL I need an expert in this house to unravel my problem May be that is you Taking a look ahead to see youHABANERO88

    Antworten

  12. What i do not realize is in fact how you are no longer actually much more wellfavored than you might be right now Youre very intelligent You recognize thus considerably in relation to this topic made me in my view believe it from numerous numerous angles Its like men and women are not fascinated until it is one thing to do with Lady gaga Your own stuffs excellent All the time handle it upHABANERO88

    Antworten

  13. I loved as much as youll receive carried out right here The sketch is attractive your authored material stylish nonetheless you command get bought an nervousness over that you wish be delivering the following unwell unquestionably come more formerly again as exactly the same nearly a lot often inside case you shield this hikeHABANERO88

    Antworten

  15. Attractive section of content I just stumbled upon your blog and in accession capital to assert that I get actually enjoyed account your blog posts Anyway I will be subscribing to your augment and even I achievement you access consistently fastSABA303

    Antworten

  20. I have been surfing online more than 3 hours today yet I never found any interesting article like yours It is pretty worth enough for me In my opinion if all web owners and bloggers made good content as you did the web will be much more useful than ever beforeSABA303

    Antworten

  27. What i do not realize is in fact how you are no longer actually much more wellfavored than you might be right now Youre very intelligent You recognize thus considerably in relation to this topic made me in my view believe it from numerous numerous angles Its like men and women are not fascinated until it is one thing to do with Lady gaga Your own stuffs excellent All the time handle it up SLOT DANA GOPAY

    Antworten

Comments

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.