Create Next App

Setting up your project

I'm using NextJs and Javascript. If you want to use Typescript, you can see react-basics-ts. To set up your Nextjs project, run the following command:

npx create-next-app@latest

You will be asked a few questions:

What is your project named? my-app
Would you like to use TypeScript? No
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a 'src/' directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for 'next dev'?  No / Yes
Would you like to customize the import alias ('@/*' by default)? No / Yes

After that, run the following to run the development server.

npm run dev

// If you're using React, use the following instead:

npm start

Open the development server at localhost:3000.

Great 😁! You have now set up your own NextJs project! If you want to use the styles on this website, you can go here.

Counter

Let's talk about counters. They usually appear when you create a Vite + React project, like shown below, as they are the simplest things you can do with React.

Let's go to our app.js, delete everything and create a default function.

export default function Page(){
  return(
    <>
      Hello world
    </>
  )
}

Now, save your changes and go to the devlopment server.

Pardon the bad quality 😅. Now we have a simple 'Hello world' on our server. To create our counter, we'll import useState from React.

import { useState } from 'react';

Don't forget to add "use client" at the top of your project. Not doing that would render an error.

"use client"

Great, now paste the following code in your app.js:

"use client"

import { useState } from 'react';

export default function Page(){

  const [ count, setCount ] = useState(0);

  return(
    <>
      <button onClick={() => setCount(count + 1)}>Count is {count}.</button>
    </>
  )
}

Huh 🤨? Okay, I'll break this code into pieces.

const [ count, setCount ] = useState(0);

Okay, so we're defining a variable in the code above, and setting the value to useState(0). UseState is just something from React that allows you to change a variable.

<button onClick={() => setCount(count + 1)}>Count is {count}.</button>

So now when you press the button, we're setting count to count + 1. The count variable was previously 0, so 0 + 1 = 1. What about the reset button? Okay, let's add a button into our app.js and give it this function:

"use client";

import { useState } from "react";

export default function Page() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Count is {count}.</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </>
  );
}

Right now, in out reset button, we're setting the count variable to 0, which is reseting it. Let's test our project now, and...

...what? We just had an error. Let's see. Hmm. Okay, that's because we didn't put the setCount(count + 1) inside a function. To add it in a function, simple put it in {} and add a () => in front of it.

"use client"

import { useState } from "react";

export default function Page() {
  const [ count, setCount ] = useState(0)

  return(
    <>
      <button onClick={() => {setCount(count + 1)}}>Count is {count}.</button>
      <button onClick={() => {setCount(0)}}>Reset</button>
    </>
  )
}

Now let's run the development server again.

Nice! Now we have a simple counter.

How does everything work on the main page? React, that's how.

Setting up your project

Counter

Modal