Creating My First Next.js APP

For today, I created my first Next.js project and edited the root page!
I don't exactly know what that is yet, but I know it displayed the content on my screen😁

And yes! I wrote that little Hello World right there myself! (Proud moment!🥰).

So, just in case you're learning along with me, I'll be showing you how to set up your first Next.js app.

First, you'll need to have:

• Node.js (version 18 and above) installed - This helps with installing your app dependencies.

• An IDE (Preferably Visual Studio Code) for your code editing.

Once you have these ready,

• Go ahead and create a new folder on your computer, then open it on your VS Code (or any IDE of your choice).

Now we need to create the Next.js app.

Open the terminal on your VS Code and run the command:

npm create-next-app@latest

This would prompt a list of configurations:

• Enter a suitable name for your project

• Would you like to use TypeScript? - Select yes if you’re using TypeScript for your project, and No if you want to use JavaScript instead.

• Would you like to use ESLint? - Select yes. This helps maintain code quality and consistency for your project.

• Would you like to use Tailwind CSS? - Yes, if you want to use Tailwind CSS for your styling.

• Would you like your code inside a ‘src/’ directory? - (If you’re coming from React, this should sound familiar) Select Yes for your first try; you’ll learn more about it later.

• Would you like to use App Router? - Yes, please! You’ll love it!😁

• Would you like to use Turbopack for ‘next dev’? - No (for a start), I’ll share why in the next episode.

• Would you like to customize the import alias (‘@/*’ by default)? - No. These are the conventional characters you use to import files or libraries into your code. You don’t want to change them unless you have a good reason to.

Once you’re done with the configuration, give it a few seconds to install the dependencies, and you should have your application folder on your workspace panel like so:

Now let’s get the application running:

• Navigate into the project folder with the command:

  cd your-project-name

• Then run the command:

  npm run dev

  This starts the development server and serves your app on http://localhost:3000

  

  • To open your application in your browser, press cmd/ctrl on your keyboard while you click on the localhost link.

  • Yipeee! Your first Next.js application is up and running!

    

    You can navigate to your src/app/page.tsx directory in your code editor to edit the page content.

    Look who just created their first Next.js app! I guess you’re as excited as I am.

    Okay, see you in the next one!😁