Get Started NextjsTutorial — 4. Creating the Nextjs project

00:00 / 00:00

4. Creating the Nextjs project

To create the project with Next.js, we'll start from scratch.

First, use the Next.js CLI to generate the project structure:

npx create-next-app@latest

Name the project "myblog" and choose the following options for a basic setup:

Would you like to use TypeScript? » Yes
Would you like to use ESLint? » No (we can add it later)
Would you like to use Tailwind CSS? » No
Would you like your code inside a src/ directory? » Yes
Would you like to use App Router? (recommended) » Yes (this is the latest version of Next.js and the recommended one)
Would you like to use Turbopack for next dev? » No (this is a new bundler for Next.js but not yet production-ready)
Would you like to customize the import alias (@/* by default)? » No (we won't use aliases for now, but you can add them later)

Now, navigate into the project folder (ideally, open the new folder in VSCode).

Start the project and make sure it works:

npm run dev

Open your browser and go to "localhost:3000" to see the default starter page.

To make things easier, I’ll open the project directly in VSCode from the created folder.

Cleaning Up

Let’s remove the files we don’t need:

The ./public folder
./src/app/favicon.ico
./src/app/page.module.css

Then in ./src/app/page.tsx, update the code:

./src/app/page.tsx

- import Image from "next/image";
- import styles from "./page.module.css";

export default function Home() {
  return (
-   <div className={styles.page}>
-     <main className={styles.main}>
-       <Image
-         className={styles.logo}
-         src="/next.svg"
-         alt="Next.js logo"
-         width={180}
-         height={38}
-         priority
-       />
-       <ol>
-         <li>
-           Get started by editing <code>src/app/page.tsx</code>.
-         </li>
-         <li>Save and see your changes instantly.</li>
-       </ol>
--       <div className={styles.ctas}>
-         <a
-           className={styles.primary}
-           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-           target="_blank"
-           rel="noopener noreferrer"
-         >
-           <Image
-             className={styles.logo}
-             src="/vercel.svg"
-             alt="Vercel logomark"
-             width={20}
-             height={20}
-           />
-           Deploy now
-         </a>
-         <a
-           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-           target="_blank"
-           rel="noopener noreferrer"
-           className={styles.secondary}
-         >
-           Read our docs
-         </a>
-       </div>
-     </main>
-     <footer className={styles.footer}>
-       <a
-         href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-         target="_blank"
-         rel="noopener noreferrer"
-       >
-         <Image
-           aria-hidden
-           src="/file.svg"
-           alt="File icon"
-           width={16}
-           height={16}
-         />
-         Learn
-       </a>
-       <a
-         href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-         target="_blank"
-         rel="noopener noreferrer"
-       >
-         <Image
-           aria-hidden
-           src="/window.svg"
-           alt="Window icon"
-           width={16}
-           height={16}
-         />
-         Examples
-       </a>
-       <a
-         href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-         target="_blank"
-         rel="noopener noreferrer"
-       >
-         <Image
-           aria-hidden
-           src="/globe.svg"
-           alt="Globe icon"
-           width={16}
-           height={16}
-         />
-         Go to nextjs.org →
-       </a>
-     </footer>
-   </div>
+   <h1>Hello Blog!</h1>
  );
}

We’re now ready to start building our blog.