Next.js 13 Beta Blog Post

next-13-beta-create-app.zsh

npx create-next-app@latest --experimental-app

❯ npx create-next-app@latest --experimental-app
✔ What is your project named? … next-13-beta
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /Users/justin/source/linkedin/next-13-beta.

Using npm.

Installing dependencies:
- react
- react-dom
- next
- @next/font
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next


added 270 packages, and audited 271 packages in 16s

102 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initializing project with template: app

Initialized a git repository.

Success! Created next-13-beta at /Users/justin/source/linkedin/next-13-beta

next-13-beta-fetch-data.tsx

import Image from "next/image";
import styles from "./page.module.css";

async function getData() {
  const res = await fetch(
    "https://api.chucknorris.io/jokes/random?category=career",
    {
      cache: "no-store",
    }
  );
  if (!res.ok) {
    throw new Error("Failed to fetch chuck joke 🥲");
  }

  return res.json();
}

export default async function Home() {
  const data = await getData();

  return (
    <main className={styles.main}>
      <p className={styles.quote}>{data.value}</p>
      <Image
        className={styles.chuck}
        src="/chuck.jpg"
        alt="Chuck Norris"
        width={775}
        height={550}
        priority
      />
    </main>
  );
}

next-13-beta-start-app.zsh

❯ npm run dev

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
event - compiled client and server successfully in 297 ms (242 modules)