First Project in Nextjs

In this article, I have explained how I created my first project in nextjs. My first project was a simple web page created using nextjs and tailwindcss. I have learned coding online through freeCodeCamp.org. Due to a lack of experience, I faced an array of obstacles during creating my first project.

Tutorials I followed

I usually watch tutorials from Traversy Media or freecodecamp.org. The first video I watched was a crash course on nextjs by Traversy Media this tutorial gave me in-depth knowledge of nextjs.

And the second tutorial I watched was a crash course on tailwindcss by Traversy Media this one was also a fantastic tutorial and describes well about tailwindcss.

After watching these tutorials I was motivated enough that now I can build my first project in nextjs.

How I Picked a Design for the first project

It was quite simple for me to choose a design I searched on Google for free Figma templates and picked one of them. The template I picked was Digital-Marketing-Website. There was also an option to open in Figma I opened it by logging in to Figma.

My Plan for the first project in nextjs

First of all, break down the whole project design into three sections:

  • Navbar / Header
  • Main
  • Footer

Let’s Create my first project in the code editor

I usually use vs code for coding. I have created my next-app by running

npx create-next-app@latest
 
yarn create next-app
 
pnpm create next-app

the command in the terminal of vs code.

After running the above command I answered the following prompts:

What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
Would you like to use ESLint with this project?  Y/N
Would you like to use Tailwind CSS with this project? Y/N
Would you like to use the `src/ directory` with this project? Y/N
What import alias would you like configured? `@/*`

After answering the prompts, my project is created with the correct configuration depending on my answers.

Now I can run my next-app (my-app) on the local server by running the command below

npm run dev

above command will run your project on the local server. Now I can see my first project on localhost:3000.

Framework

I have learned just one CSS framework which is Tailwindcss. I have installed this framework in my next-app by using the commands below

npm install -D tailwindcss
npx tailwindcss init

the above commands will create a tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

now add the above content in the tailwind.config.js file. After that

@tailwind base;
@tailwind components;
@tailwind utilities;

add the above content in the css file in the react-app.

Now run the build process by running the below command

npm run dev

Started coding for the first project in nextjs

Create the file for the first section such as header.js in the src folder or depending on the folder structure and define a function inside as below

const Header = () => {
  return (
        <div>
              <h1 className="text-3xl">Hello World</h1>
        </div>
     );
};
export default Header;

Now import the Header in your index.js file such as below

import Header from "../Sections/header.js";
export default function Home() {
  return (
    <div>
      <Header />
    </div>
  );
}

Save the code in both files index.js & header.js by using Ctrl + s shortcut it will save and now you will see the text “Hello World” on the local host.

Worked hard and completed the first project in next.js by creating other components below header.js such as hero, icon, blog, services, social, email, etc. You can see the navbar & hero section in the image below.

first project in nextjs

You can check my first project in nextjs by clicking on Digital Marketing Website.

second web image

Beginners guide

If you are at the beginner stage the qualities you need and are essential for learning development are you should have a forever learning attitude, be hard working, stay motivated, have logical thinking, be patient, etc.

Experience

Some essential thing that I have learned through my first project in nextjs is to make a plan before starting any project. It is a better approach to learning and practicing a skill by creating small projects to become a professional developer. After this project, I felt problem-solving skill is essential for everyone in the field of development/coding.

Similar Posts