In this series, weβre continuing through the basics of learning the new features of 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-two is referenced as the second 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 dig deeper and look at how we can construct pages and layouts in the new Next.js 13 app directory, and we'll also look at some basic routing.
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-three
|
βββ .next
|
ββ app
| βββ about
| | βββ layout.tsx
| | βββ page.tsx
| |
| βββ 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.
1οΈβ£ Start editing the page by modifying app/page.tsx
. The page auto-updates instantly as you edit the file.
2οΈβ£ Start editing the page by modifying about/page.tsx
. The page auto-updates instantly as you edit the file.
3οΈβ£ Start editing the layout by modifying app/layout.tsx
. The page auto-updates instantly as you edit the file.
4οΈβ£ Start editing the layout by modifying about/layout.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.