Learn how to get Next.js version 13 set up and installed for the rest of the beginner tutorial series.
In this series, weβre going through the basics of learning the static site generator, Next.js.
Read the related Blog article for this repository:
π Hello, I'm CalvΓ‘rio.
π My Portfolio
π° Check out my Blog with dozens of tutorials
This repository nextjs-one is referenced as the first part of the Next.js 13 for Beginners tutorial series.
- π HTML
- π CSS
- π JavaScript
- π React
- π typescript
- π Tailwind CSS
- π Google Chrome Web Browser
- π Git
- π Visual Studio Code (aka VS Code)
- π GitHub
- π Node.js & NPM
- π {JSON} Placeholder
- π Next.js Official Site
- π Next.js 13 Beta Docs
- π Cloudflare: How does a CDN work?
- π MDN - Mozilla Documentation Network
Weβll go through installing Next.js 13
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.
This is a Next.js project bootstrapped with create-next-app
.
π¨
nextjs-one
|
βββ .next
|
ββ app
| βββ api
| βββ hello
| | βββroute.ts
| |
| βββ favicon.ico
| βββ globals.css
| βββ layout.tsx
| βββ page.module.css
| βββ page.tsx
|
βββ public
| βββ next.svg
| βββ thirteen.svg
| βββ thirteen.svg
|
βββ node-modules
|
βββ .eslintrc.json
βββ .gitignore
βββ next.config.js
βββ next-env.d.ts
βββ package.json
βββ package-lock.json
βββ Readme.md
βββ tsconfig.json
π¨
1οΈβ£ Install Project Dependencies:
- π npm-install
npm install
2οΈβ£ Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
Open http://localhost:3000 with your browser to see the result.
3οΈβ£ Start editing the page by modifying app/page.tsx
. The page auto-updates instantly as you edit the file.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.