Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Next.js入門(2023)

 Next.js入門(2023)

More Decks by NearMeの技術発表資料です

Other Decks in Programming

Transcript

  1. 2 第一世代 (Web1.0) HTML /page1 Database / Other Service Template

    Web Service JavaScript • インタラクティブな画面が作りづらい
  2. 3 第二世代 (Web2.0/Ajax) HTML JavaScript (jQuery..) /page1 Database / Other

    Service Template Web Service API Service • ページ遷移に時間がかかる • ページ間で状態を共有しづらい
  3. 4 第三世代 (SPA: Single Page Application) HTML JavaScript (React..) /page1

    Database / Other Service Web Service API Service /page2 • ロードするJavaScriptの肥大化 • SEOが効かない
  4. 5 第四世代 (Code Splitting、Pre-rendering) /page1 Database / Other Service Web

    Service API Service HTML (Pre-rendering) JavaScript (React..) JavaScript (Splitted) /page2 SSR/SSG: Server Side Rendering / Generation • もっとPre-renderingできる部分がある
  5. 7 新世代 (Server Components) /page1 Database / Other Service Web

    Service API Service HTML (Server & Client Components) JavaScript (Client Components) /page2 Data (Server Components) JavaScript (Client Components) SSR/SSG: Server Side Rendering / Generation サーバー クライアント
  6. 10 10 ページ作成 import styles from '../page.module.css' export default function

    Page() { return ( <main className={styles.main}> <div className={styles.description}> <p>Page1</p> </div> </main> ) } page1/page.tsx /page1にアクセス後、ページを編集してみよう
  7. 11 11 クライアントコンポーネント 'use client' import { useState } from

    'react' export default function Counter() { const [count, setCount] = useState(0) return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ) } import styles from '../page.module.css' import Counter from './Counter' export default function Page() { return ( <main className={styles.main}> <div className={styles.description}> <p>Page2</p> </div> <Counter /> </main> ) } page2/page.tsx page2/Counter.tsx
  8. 12 12 リンク作成 import Link from 'next/link' import styles from

    '../page.module.css' export default function Page() { return ( <main className={styles.main}> <div className={styles.description}> <p>Page1</p> </div> <Link href='/page2'>Page2</Link> </main> ) } page1/page.tsx
  9. 13 13 プロダクションモードで確認 $ npm run build && npm run

    start 開発ツールを開いて ネットワークの挙動を確認してみよう page3を作成して、page2からリンクを設 けた時の挙動を確認してみよう