Next.js最強

この発表資料「Next.js最強」は、Next.jsの概要とその強力な機能について紹介しています。具体的には、ReactとNext.jsの歴史や特徴、自分のポートフォリオでのNext.jsの活用事例について説明しています。また、サーバー構成やアーキテクチャに関する基礎知識、SSRとSSGの違い、APIルートのサポートなどの技術的な詳細も含まれています。最後に、ブロックチェーン技術を活用したEnn-Driveや、42surveyなどの具体的なプロジェクト例も紹介されています。

Transcript

1. アプリケーションレイヤー入門 　　　　　　最強 2023年9月入学 konaito
2. konaito / 内藤剛汰 https://konaito.github.io/
3. 目次 0.プロフィール 1.アプリケーションの構成 2.React,Next.jsについて 3.自分のポートフォリオでのNext.js 4.まとめ
4. DBサーバ
 APサーバ
 WEBサーバ
 バックエンド 
 クライアントサイド
 フロントエンド 

5. DBサーバ
 APサーバ
 WEBサーバ
 バックエンド 
 クライアントサイド
 フロントエンド 

6. Reactの歴史 1.Reactの登場以前 ・サーバーサイドでの全面的なレンダリングが一般的 ・ページの更新には全ページの再読み込みが必要 2.Reactの登場 ・コンポーネントの概念でUIをパーツ化 ・仮想DOM技術は、実際のDOMに触れることなく効率的に UIを更新 2.Reactのアップデート ・React Hooksによる簡単な状態管理 ・React Server Component(beta)によるサーバーサイド機能の充実
7. Next.js登場 App Routerによる圧倒的なページルーティングのしやすさ app/ page.tsx about/ page.tsx works/ page.tsx user/ [userid]/ page.tsx “/” “/about” “/work” “/user/[userid]”
8. Next.js登場 APIルートのサポート app/ api/ hello/ route.tsx import { NextRequest , NextResponse } from 'next/server' ; export async function GET(req: NextRequest) { const body = JSON.stringify({ message: "hello" }); return new NextResponse(body, { status: 200, headers: { 'Content-Type': 'application/json', }, }); } “/api/hello”
9. Next.js登場 SSR（サーバーサイドレンダリング） とSSG（静的サイト生成） ページ表示が早く、 SEO対策になります。 *ssr…ランタイム時にサーバーサイドでレンダリング *ssg…build時にレンダリング
10. フロントエンド バックエンド クライアントサイド　表示・出力 WEBサーバー　httpリクエストを処理 APサーバー　ビジネスロジックを処理 DBサーバー　データ格納・更新・取得 自分のポートフォリオについて
12. Enn-Drive ドライバーに対しての信用情報をブロックチェーン上で 管理し、スケーラビリティのある技術基盤を構築 クライアントサイド　表示・出 力 42survey 42学生の校舎に対する意見を可視化するプラットフォーム クライアントサイド　表示・出 力
13. 🫣
14. Enn-Drive ドライバーに対しての信用情報をブロックチェーン上で 管理し、スケーラビリティのある技術基盤を構築 クライアントサイド　表示・出 力 42survey 42学生の校舎に対する意見を可視化するプラットフォーム クライアントサイド　表示・出 力
15. アプリケーションレイヤー入門 　　　　　　最強