Hi and welcome to this new tutorial series on building AI applications using Next.js. In this first part, we’ll get started on the basics and setting up Next.js for our project.
What is Next.js?
Next.js is a powerful React framework designed to build fast, search-engine-friendly, and dynamic websites. It uses server-side rendering (SSR) and static site generation (SSG) for very fast load times and to improve search engine visibility.
Next.js also simplifies development with features like built-in routing, data fetching, and API routes. It has a strong and active community providing us with numerous libraries and tools for extending functionality. Overall Next.js is an efficient foundation for crafting modern web experiences.
Next.js also comes with a Node.js runtime. This means we can run server-side code and interact with databases, APIs, and other services. Javascript can be used both on the client’s browser for the front end and on the server side for the back end, basically allowing us to build full-stack applications within a single language and framework, which is pretty awesome!
As we write our code within one single Next.js project, the front-end stuff will get bundled and sent to the browser client of the user, while the back-end code will get executed on the Node.js server environment. This greatly simplifies and streamlines our development process!
Prerequisites
- Basic experience with Javascript is helpful. However, as Javascript is reasonably easy to read, familiarity with a different language like Python should also be sufficient.
- Some rough knowledge of basic HTML and CSS and how they work together to create web pages is going to be a big help to understanding and following along.
- Experience with React is beneficial but not required.
- For all the above requirements we will be covering the basics and whatever you need to know to be able to follow along, and take out some time to explain syntax and meaning whenever we first encounter something, be it some Javascript, CSS, or a React Component, so don’t worry if you are not yet familiar with them. Just know that there is much more to learn about these topics, but you can always dive in deeper afterward.
Setting up our development environment
First of all, we must make sure that we have Node.js installed on our computer, as this is the runtime environment that will take care of the back-end code etc. You can download Node.js from the official website nodejs.org:
Just run through the install wizard and you may get a popup question like this:
Personally, I’d just select yes. I’m not entirely sure if this is needed for Next.js specifically, but sooner or later you will probably need these tools anyway if they’re not on your system already. Just let that run until it finishes your installation.
After that, the script will start running and installs the necessary tools we selected in the checkbox earlier. It will skip over stuff already present on your system:
When that is done, we can continue. I’ll be using VSCode as my code editor, and while you are free to use your own, following along may be the easiest and most convenient if you use the same editor, especially as we’ll be using some specific extensions to make our life a bit easier.
Open up VSCode, go to the extensions tab on the left, and search ES7+:
Go ahead and install this particular extension as it will help us out with some of the boilerplate code that comes with writing React components.
Next up search for Typescript and find and install the following extension:
Typescript will allow us to work with typing in our code, and this extension will help us with syntax completions and such. If you’re not familiar with Typescript you’ll see how the very basics work as we go along.
Finally, search for Tailwind CSS and find and install the following extension:
Tailwind CSS is a utility-first CSS framework that we’ll be using to style our components. It’s a little bit like Bootstrap with the utility class names so you’ll find the general idea quite familiar if you’ve ever worked with this. The extension will help us with syntax highlighting and such.
Again, if you’re not familiar with Typescript or Tailwind CSS, don’t worry. We’ll cover what we need as we go along so you can use this course as a basic introduction and then build on your knowledge afterwards.
Creating a new Next.js project
Now open up a terminal window and make sure you are in a folder where you are comfortable creating your new project folder inside. So this does not have to be the project folder, but the place for your project folder to go, as the install script will create the folder for you. Open up the terminal and start with the following command:
npx create-next-app@14.2.5
Normally you would run npx create-next-app@latest, but for tutorial purposes, it’s best to stick to the same version I’m using so your experience will be as similar to mine as possible. npx is a package runner tool that comes with Node.js (which we installed earlier), and it will download the latest version of create-next-app and run it for you. This will create a new folder with the name of your project, and install all the necessary dependencies for you.
It will ask you several questions:
We type y to proceed and it will ask us several questions. First I’ll use the name finxter_nextjs for the project. Say Yes to Typescript, ESLint (for code linting and catching errors), and Tailwind CSS (for styling). We will not be using the src/ directory, but make sure in the next question that you do use the new App Router by selecting Yes. There is no need for us to customize the default import aliases, so we’ll just select No for that. Now press enter and it will install the necessary dependencies for you and you will see your project folder appear:
📁 finxter_nextjs
Running the project
There are a whole lot of folders and files inside this new project folder, but before we get into that let’s make sure our project runs correctly. Go back into the terminal window and run the following command:
cd finxter_nextjs npm run dev
First we navigate into the project folder (cd stands for change directory), make sure to use your own folder name if you chose a different one from mine. Then we run the npm run dev command which will start up the development server for us. NPM is the Node.js package manager and kind of the equivalent of pip for Python. We u