Zenn
Open5

Next.js on AWS

AWS
Next.js
Teru roomTeru room
実行結果
/Users/sharland/dev/aws/nextjs
  • (base) macpro:nextjs sharland$ npx create-next-app --typescript --no-eslint --no-tailwind --no-src-dir
実行結果
Need to install the following packages:
  create-next-app@13.4.4
  • Ok to proceed? (y) y
  • ? What is your project named? › proto-app
  • ? Use App Router (recommended)? › No / Yes [Return]
  • ? Would you like to customize the default import alias? › No / Yes [Return]
実行結果
Creating a new Next.js app in /Users/sharland/dev/aws/nextjs/proto-app.
Using npm.
Initializing project with template: app 
Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
added 27 packages, and audited 28 packages in 16s
4 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created proto-app at /Users/sharland/dev/aws/nextjs/proto-app
npm notice 
npm notice New minor version of npm available! 9.5.1 -> 9.7.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.7.1
npm notice Run npm install -g npm@9.7.1 to update!
npm notice
  • (base) macpro:nextjs sharland$ tree -L 2
実行結果
.
└── proto-app
    ├── README.md
    ├── app
    ├── next-env.d.ts
    ├── next.config.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── public
    └── tsconfig.json

4 directories, 6 files
Teru roomTeru room
  • (base) macpro:nextjs sharland$ code ./proto-app/
  • ターミナル → 新しいターミナル
  • (base) macpro:nextjs sharland$ npm run dev
実行結果
> proto-app@0.1.0 dev
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

- event compiled client and server successfully in 4s (306 modules)
- wait compiling...
- event compiled client and server successfully in 435 ms (306 modules)
Teru roomTeru room
  • (base) macpro:proto-app sharland$ mkdir app/sample && touch app/sample/page.tsx
sample/page.tsx
import styles from '../page.module.css'

export default function Sample() {
  return(
    <main className={styles.main}>
      <h2>このページは<span className={styles.card}>proto-app/app/sample/page.tsx</span>です！</h2>
    </main>
  )
}
Teru roomTeru room
sample/page.tsx
import styles from '../page.module.css'
import Link from 'next/link'

export default function Sample() {
  return(
    <main className={styles.main}>
      <h2>このページは<span className={styles.card}>proto-app/app/sample/page.tsx</span>です！</h2>
      <Link href="/">トップページに戻る</Link>
    </main>
  )
}
Teru roomTeru room
ユーザー名 表示名 ステータス MFA デバイス 作成者
TeruRoom Teru Room ✅有効 なし 手動