Back to Blog Overview Logo

Learning Next.js with AI Assistants

AI Assistants

As a developer with limited web programming experience, I recently started a journey to learn Next.js and modernize the programming stack for a client web app. In this blog post, I'll share my experience using various AI assistants, including ChatGPT 4, Perplexity, Copilot, Codiumate and Claude, to aid my learning process and development workflow.

GPT 4

First I had to check if it was possible to develop a web app using AI without any meaningful web development knowledge. So I started with giving Chat GPT 4 (from OpenAI) a screenshot and asked it to generate that UI in HTML/CSS. I was already using GPT 4 and its API for other projects.

Perplexity Pro

At that moment I got an email that I would get 1 year of Perplexity Pro because of the Rabbit R1 that I had pre-ordered. So I started testing Perplexity Pro and soon used Perplexity Pro instead of GPT 4. This had two main reasons.

GPT 4 didn't allow you to opt-out of using your chat data for training (unless you paid for the more expensive team variant for which the minimum subscription is for 2 people). Since April 30 it is possible to opt-out without losing the chat history feature. (https://twitter.com/OpenAI/status/1785390246575964628)

Perplexity can use GPT 4 Turbo. But it first searches the web, which gives you more correct and up to date information. And with the Copilot option (Not to be confused with Microsoft Copilot / Github Copilot), it asks you extra questions when things are not completely clear from your question. Also it gives the search results as sources for the answer, so you can read/watch (could be Youtube videos) more about the specific thing you were looking for.

I used Perplexity to learn how to set-up a Next.js project. From the first installation steps to architecture advice. When I had the first screen, some things like navigation to another page were not directly clear, so I did have to read a little in the official Next.js docs.

Copilot vs Codiumate

Perplexity Pro is nice to get most of your code, but it could sometimes create code with syntax errors. And when you just start with a new language/framework it is not directly clear why the pasted code won't work.

In a Flutter project I was already experimenting with Github Copilot and I heard from someone about AlphaCodium (from codium.ai). So I decided to use both Github Copilot and Codiumate and see what I would like most. I use Visual Studio Code for the Next.js development, which is supported by both.

It turned out I would mostly use Github Copilot, which mostly was because it just felt easier and faster to use at that point in time. It might be different if I started now, because codium.ai continues to add a lot of nice features to Codiumate.

The things I used Copilot for:

  • When I paste code from Perplexity, it could have syntax issues. If you click on it in Visual Studio Code with Github Copilot enabled, it gives you an option to fix or explain with Copilot.
  • Chat with Copilot when referencing certain files, so I don't have to copy paste to perplexity, but can just talk about my current code.
  • At the beginning I would mostly just paste code from perplexity, but the more I learned about Typescript and Next.js the more parts I was writing myself. And the more Copilot would give me suggestions on how to complete my code, which could sometimes be complete functions after only typing the function name.

At the beginning GPT 4 and Copilot (which used GPT under the hood) both had the problem that it was sometimes giving advice based on older Next.js versions, because its knowledge wasn't up to date yet. But I didn't have that issue anymore recently.

Claude Opus

I heard great things about Claude Opus and I wanted to try it out. At that moment Perplexity Pro did support Claude Opus, but only for 3 requests per day. Which isn't really useful. After some previous failed attempts I got access to Claude Opus (it isn't available in the Netherlands at the moment).

I like using it because of its large context window which lets me upload multiple files and ask questions about it while also being able to upload a screenshot of a UI I want to work on.

How I currently use everything together

Perplexity Pro:

  • Pasting api url + request/response json + a code example in the style/structure I would like the code. It will generate the interfaces for the request/response and the code to retrieve the information from the api. The code example has been mostly generated by Perplexity in an earlier stage of the project.
  • Asking questions on how to do specific things. The results for this seem to be the best from Perplexity and if things aren't clear you can look at the sources

Perplexity Pro/Claude:

  • Upload a screenshot of the UI I want and let it generate code for it.

Claude:

  • Upload a screenshot of the current UI and what I want, together with the code I already have. I like the way Claude shows uploaded files in its UI and it supports a large context window.

Copilot:

  • Make small changes to the code
  • Fix syntax issues
  • Fix small code issues that don't require a screenshot
  • Code completion

Privacy

Always take into account that your code could leak out in some way. There are some settings you could use to make it less likely, but always keep in mind that it could happen, so don't do it with sensitive things.

To get the most privacy out of the used tools, take a look at:

  • Perplexity has an option to uncheck, inside Settings/Account. The option “AI Data Retention”.
  • Copilot has an option to uncheck inside Settings/Copilot. The option “Allow GitHub to use my code snippets from the code editor for product improvements”.
  • Claude:
    • Inputs/outputs are not used to train the model, unless:
      1. Your conversations are flagged for Trust & Safety review
      2. You've explicitly reported the materials to us
      3. By otherwise explicitly opting in to training

Conclusion

I think using AI tools is a nice way to learn a new language/framework if you already have some programming experience. You can start building meaningful things way sooner than you would otherwise be able to do.

Next Steps

While writing this blog I noticed that Claude Opus doesn't seem to be restricted to 3 requests per day anymore inside Perplexity Pro, so I might try Perplexity with Claude Opus a model instead of the default option or GPT 4. And if I like this, I might stop my Claude subscription again.

I have been experimenting with running LLM's locally, but haven't used it for coding yet. So I want to see if I can keep the same workflow while using local LLM's so I don't have to worry about code leaking out in some way.

I also saw there are a lot more Copilot alternatives available today, so I will probably dive into some of them.

Also more and more complete options are coming available to take even more development work out of your hands. So I want to check how it is to work with those tools. Tools for this that are available right now are:

Used Tools: