Starting a Next.js Project

What better way to learn than to do?

In this post, I will walk you through installing Next.js and getting it ready for development. So, by the end of this post you will have a development-ready Next.js development environment ready to go.

Before we start make sure you have the following installed:

• npm
• node.js
• git

Install Next.js

1. open terminal

2. navigate to project folder

3. install next.js using the following command:

   npx create-next-app@latest app-name-here

You will be prompted with a series of choices:

• ✅ TypeScript
• ✅ ESLint
• ✅ TailwindCSS
• ✅ src/directory
• ✅ App Router
• ✅ Turbopack
• ❌ Customize import alias

Removing boilerplate code and unused files

1. Navigate into the app root folder

2. Remove boilerplate code from the following 2 files:

   // src/app/page.tsx
   export default function Home() {
     return (
       <div className="flex h-screen w-screen items-center justify-center bg-black text-white">
         <h1 className="text-6xl text-center">Under Construction</h1>
       </div>
     );
   }

   /* src/app/globals.css */
   @import "tailwindcss";

3. Delete .svg and .ico files:

4. commit changes to git

   git commit -am "removed boilerplat code and unused icon files"

Link existing local to a new remote github repository

1. go to https://github.com

2. Create a new repository:

   

Follow instructions on the next screen:

• select owner
• choose repository name
• choose visibility
• click create repository

On the next screen choose:

Then paste the copied command on the terminal and hit enter

Start the development server

From application root folder run:

npm run dev

You should see:

With this starting point, we are ready to build!

See you on the next one.