Codevolution · Transcript · · Updated
Next.js 15 Tutorial - 2 - Hello World – Transcript
Video by Codevolution · Watch the original on YouTube
Summary
AI-generated from the transcript. Verify details against the source video.
- Next.js requires Node.js version 18.18 or later and a text editor like VS Code for development.
- Creating a new Next.js project is done by running the command npx create-next-app@latest in the terminal.
- Running npm run dev inside the project folder starts a development server on localhost port 3000.
Use this video with Pro
Reading, copying and transcript downloads are free. Create saved AI results for this video with a signed-in Pro account ($9/month).
Transcript
Search ignores accents. All transcript text stays visible.
Let's create our first Next JS application together. First things first, we need to set up our development environment. We need two things, Node.js and a text editor of your choice. Head over to nodejs.org to download and install the latest stable release of Node.js.
If you already have it installed, just make sure it's up to date. Next JS requires Node.js version 18.18 or later. For the text editor, I personally recommend VS Code. You can grab that from code.visualstudio.com.
All right, with our environment ready, let's dive in. I've created a folder called Next JS Tutorials and opened VS Code in it. This folder will be our workspace throughout the course. Creating a new Next JS project is super simple. It just takes one command. Open up your terminal, control backtick being the shortcut, and run the command npx create-next-app@latest.
When you do this, you will see several prompts. First up, it will ask for the project name. We will call it hello-world. Then, you will see seven configuration prompts. Let me guide you through these choices. We want TypeScript. We want ESLint. We want Tailwind CSS.
We want our code in a source directory. We will use the new app router. Turbopack is stable in version 15, but we will opt out for now and we will stick with the default import alias. Give it a few seconds to do its thing and you'll see a new folder called hello-world with your Next JS application inside.
To get the application running, navigate into the project folder with the command cd hello-world. Then, run the command npm run dev. This starts a development server on localhost port 3000.
Control plus click or command plus click the link it gives to open the application right in your browser. And there you have it. Your Hello World application is up and running. You'll see the Next.js welcome page with an instruction that says, "Get started by editing source/app/page.tsx.
Save and see your changes instantly." Let's do exactly that. Go back to VS code. Minimize the terminal with control backtick. Open the source folder, then the app folder, and find page.tsx.
Here, if you scroll down, you can see the two instructions. "Get started by editing source/app/page.tsx and save and see your changes instantly." Let's replace the text in the second list item with Hello World.
Save it. And the browser will automatically refresh, and you will see your text change on the screen. Just like that, you've got your first Next.js application running. Now that we know how to generate a Next.js app using create-next-app, let's take a look at the project's folder structure. Supporting the channel is free. Please like and subscribe. It helps a lot.