Chapter 1 - Initialize the frontend project with Next.js¶

In this chapter, you will create a frontend project with the Next.js CLI.

You will then be able to start the application to see if it runs correctly.

Steps¶

Create a Next.js project¶

1

npx create-next-app@latest --typescript --eslint --use-npm --src-dir --import-alias "@/*" frontend

You will be asked to install create-next-app@latest, say Yes.

Then, you will be asked whether you want to use TailwindCSS and App Router. Reply No to the two questions.

Your working directory should look like this.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.
├── .devcontainer
│   ├── devcontainer.json
│   ├── Dockerfile
│   └── npm-global-without-sudo.sh
└── frontend
    ├── node_modules
    │   └── ...
    ├── public
    │   ├── favicon.ico
    │   ├── next.svg
    │   ├── thirteen.svg
    │   └── vercel.svg
    ├── src
    │   ├── pages
    │   │   ├── api
    │   │   │   └── hello.ts
    │   │   ├── _app.tsx
    │   │   ├── _document.tsx
    │   │   └── index.tsx
    │   └── styles
    │       ├── globals.css
    │       └── Home.module.css
    ├── .eslintrc.json
    ├── .gitignore
    ├── next.config.js
    ├── next-env.d.ts
    ├── package.json
    ├── package-lock.json
    ├── README.md
    └── tsconfig.json

Start the Next.js application¶

1
2
3

cd frontend

npm run dev

The output of the command should look similar to this.

1
2
3
4
5

> frontend@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1640 ms (165 modules)

Check the results¶

You can now access your Next.js application on http://localhost:3000. You should see a welcoming page to Next.js 13 with links to the docs, tutorials, templates and deployment pf Next.js app.

To stop your Next.js application, press Ctrl+C in your terminal.

Summary¶

Congrats! You have a default Next.js application running! You are now able to create Next.js projects and start/stop Next.js applications.

Go further¶

Are you able to change the links from Templates to Pimp My Wall and redirect it to the BeeScreens Pimp My Wall application (https://pmw.beescreens.ch). Expand the next component to see the answer!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

...
<a
	href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
	className={styles.card}
	target="_blank"
	rel="noopener noreferrer"
>
	<h2 className={inter.className}>
		Templates <span>-&gt;</span>
	</h2>
	<p className={inter.className}>
		Discover and deploy boilerplate example Next.js&nbsp;projects.
	</p>
</a>
...

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

...
<a
	href="https://pmw.beescreens.ch/"
	className={styles.card}
	target="_blank"
	rel="noopener noreferrer"
>
	<h2 className={inter.className}>
		Pimp My Wall <span>-&gt;</span>
	</h2>
	<p className={inter.className}>
		Come and create a masterpiece with the other players!
	</p>
</a>
...