Next.js入門（2023）

Transcript

1. 0 Next.js入門 (2023) 2023-02-03 第30回NearMe技術勉強会 Kenji Hosoda
2. 1 1 Webフロントエンドの歴史
3. 2 第一世代 (Web1.0) HTML /page1 Database / Other Service Template Web Service JavaScript • インタラクティブな画面が作りづらい
4. 3 第二世代 (Web2.0/Ajax) HTML JavaScript (jQuery..) /page1 Database / Other Service Template Web Service API Service • ページ遷移に時間がかかる • ページ間で状態を共有しづらい
5. 4 第三世代 (SPA: Single Page Application) HTML JavaScript (React..) /page1 Database / Other Service Web Service API Service /page2 • ロードするJavaScriptの肥大化 • SEOが効かない
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できる部分がある
7. 6 新世代 (Server Components) https://beta.nextjs.org/docs/getting-started
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 サーバー クライアント
9. 8 8 Getting Started
10. 9 9 セットアップ $ npx create-next-app@latest --experimental-app $ npm install $ npm run dev
11. 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にアクセス後、ページを編集してみよう
12. 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
13. 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
14. 13 13 プロダクションモードで確認 $ npm run build && npm run start 開発ツールを開いて ネットワークの挙動を確認してみよう page3を作成して、page2からリンクを設 けた時の挙動を確認してみよう
15. 14 Thank you