Joshhortt / nextjs-one

Next.js 13 Tutorial for Beginners - part 1

Next.js One

---

🔰 Next.js 13 for Beginners Series

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:

✅ 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-one is referenced as the first 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 go through installing Next.js 13

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

➕ Source Code

• 🔗 Part 1 - Getting Setup in Next.js

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

📂 File structure

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

🚀 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

3️⃣ Start editing the page by modifying app/page.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.