Next.js入門（2023）

Transcript

1. 0
   Next.js入門 (2023)
   2023-02-03 第30回NearMe技術勉強会
   Kenji Hosoda
   

   View Slide

2. 1
   1
   Webフロントエンドの歴史
   

   View Slide

3. 2
   第一世代 (Web1.0)
   HTML
   /page1
   Database / Other Service
   Template
   Web Service
   JavaScript
   ● インタラクティブな画面が作りづらい
   

   View Slide

4. 3
   第二世代 (Web2.0/Ajax)
   HTML
   JavaScript
   (jQuery..)
   /page1
   Database / Other Service
   Template
   Web Service
   API Service
   ● ページ遷移に時間がかかる
   ● ページ間で状態を共有しづらい
   

   View Slide

5. 4
   第三世代 (SPA: Single Page Application)
   HTML
   JavaScript
   (React..)
   /page1
   Database / Other Service
   Web Service
   API Service
   /page2
   ● ロードするJavaScriptの肥大化
   ● SEOが効かない
   

   View Slide

6. 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できる部分がある
   

   View Slide

7. 6
   新世代 (Server Components)
   https://beta.nextjs.org/docs/getting-started
   

   View Slide

8. 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
   サーバー クライアント
   

   View Slide

9. 8
   8
   Getting Started
   

   View Slide

10. 9
    9
    セットアップ
    $ npx create-next-app@latest --experimental-app
    $ npm install
    $ npm run dev
    

    View Slide

11. 10
    10
    ページ作成
    import styles from '../page.module.css'
    export default function Page() {
    return (
    
    
    Page1
    
    
    )
    }
    page1/page.tsx
    /page1にアクセス後、ページを編集してみよう
    

    View Slide

12. 11
    11
    クライアントコンポーネント
    'use client'
    import { useState } from 'react'
    export default function Counter() {
    const [count, setCount] = useState(0)
    return (
    
    You clicked {count} times
    setCount(count +
    1)}>Click me
    
    )
    }
    import styles from '../page.module.css'
    import Counter from './Counter'
    export default function Page() {
    return (
    
    className={styles.description}>
    Page2
    
    
    
    )
    }
    page2/page.tsx
    page2/Counter.tsx
    

    View Slide

13. 12
    12
    リンク作成
    import Link from 'next/link'
    import styles from '../page.module.css'
    export default function Page() {
    return (
    
    
    Page1
    
    Page2
    
    )
    }
    page1/page.tsx
    

    View Slide

14. 13
    13
    プロダクションモードで確認
    $ npm run build && npm run start
    開発ツールを開いて
    ネットワークの挙動を確認してみよう
    page3を作成して、page2からリンクを設
    けた時の挙動を確認してみよう
    

    View Slide

15. 14
    Thank you
    

    View Slide