Joshhortt/nextjs-three

Next.js 13 Tutorial for Beginners - part 3

Next.js Two

---

🔰 Next.js 13 for Beginners Series

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:

✅ Author Links

👋 Hello, I'm Calvário.

👉 My Portfolio

📰 Check out my Blog with dozens of tutorials

🔖 Follow Me:

• Twitter
• Blog
• Dev

🚀 Description

This repository nextjs-two is referenced as the second part of the Next.js 13 for Beginners tutorial series.

🎒 Prerequisites

• 🔗 HTML
• 🔗 CSS
• 🔗 JavaScript
• 🔗 React
• 🔗 typescript
• 🔗 Tailwind CSS

🔨 Free Web Dev Tools

• 🔗 Google Chrome Web Browser
• 🔗 Git
• 🔗 Visual Studio Code (aka VS Code)
• 🔗 GitHub
• 🔗 Node.js & NPM
• 🔗 {JSON} Placeholder

📚 References

• 🔗 Next.js Official Site
• 🔗 Next.js 13 Beta Docs
• 🔗 Cloudflare: How does a CDN work?
• 🔗 MDN - Mozilla Documentation Network

💻 Getting started

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.

➕ Source Code

• 🔗 Part 2 - Routing, Layouts and Links in Next.js

This is a Next.js project bootstrapped with create-next-app.

📂 File structure

🟨
    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
🟨

🚀 Installation

1️⃣ Install Project Dependencies:

• 🔗 npm-install

npm install

🏭 Development

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.

✏️ Editing

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.

🎓 Learn More

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!

🎆 Deploy on Vercel

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.