Next.jsとNotionで高速で動く自作ブログを１から開発する実践マスター講座【デプロイ運用まで解説】

Description

NotionをCMS（バックエンド）Next.js（フロントエンド）としてブログを構築して運用する講座となっています。Notionとは無料のメモアプリのことで、メモを残す次いでにブログ投稿してアウトプット＆メモ＆ポートフォリオとして活用したい方にオススメの講座です。

■ 本コースの対象者

・React、Next.js等の基礎技術を学んだだけでは物足りない方

・NotionAPIを活用してNext.jsと連携してブログ運用してみたい方

・SSGやISRの概念や意味を実装を通して理解したい方

・TailwindCSSを活用してレスポンシブ対応のスタイリングを学んでみたい方

・ブログ運用におけるページネーションやタグ機能を実装してみたい方

・Vercelへ環境変数を設定し、デプロイ後もブログ運用をしてみたい方

・ただただWebアプリ開発好きで好奇心がある方

・etc...

Next.jsとNotionを活用した開発やブログ構築を１からやってみたい・・・

TypescriptやTailwindCSSも活用しているので、モダン技術のキャッチアップにもなります。

（ただ、Typescriptは省いている箇所が多いので各自設定していただくことになります。）

Next.jsでSSGやISRを利用することでページ読み込み速度が劇的に変わります。それを実感していただく講座でもあります。また、ページネーションやタグ検索機能も実装していますので経験のない方は有益な講座になることでしょう。

最終的にはデプロイ公開してブログ運用してポートフォリオで転職活動にご利用いただいても構いません。

１から構築したブログでのアピールは評価に繋がるかなと思います。レイアウトは適宜カスタマイズしていただいても構いません。

■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・ReactやNext.jsの基礎知識は知っている前提でお話を進めております(コンポーネントやJSX記法等)。

・ある程度Javascriptを触ったことがある人だとスムーズに受講できると思います。

What You Will Learn!

• NotionAPIを使った運用できるブログ構築ができます
• Nextjsを使用したプロジェクト構築手法が学べます
• NextjsにTypescriptを導入する方法が学べます
• TailwindCSSを使ったレスポンシブ対応のスタイリング手法が学べます
• NotionAPIライブラリを使って簡単にAPIを叩けます
• SSG(ISR)についての理解と実装方法が学べます
• getStaticPathsの理解と実装方法が学べます
• Nextjsにおける動的ルーティング実装とパス指定ができます
• ISRにおけるfallbackの理解と実装ができます
• Layoutを利用した共通ナビゲーションバーの実装ができます
• Notionメモアプリからデータベースアクセスを作成する方法が学べます
• NotionとNextjsを接続するインテグレーション作業が学べます
• NextjsにおけるTypescriptの導入が学べます
• Nextjsで発生するハイドレーションエラーの回避方法を学べます
• 動的ルーティングの深い階層構造を実装できます
• ReactMarkdownライブラリの使い方が理解できます
• ソースコードのシンタックスハイライト化が学べます
• ブログにページネーション機能を実装できます
• ブログにタグ機能を実装できます
• タグ検索コンポーネントの作成方法が学べます
• NotionAPIを使ったブログを最新投稿順にソートする方法が学べます
• 公開・非公開機能をNotionAPIで実装できます
• Vercelへデプロイし、ブログを運用する方法が学べます

Who Should Attend!

• Notionメモアプリを用いて自分用のブログを自作して運用してみたい方
• モダンな技術スタックを使って開発経験を積みたい方
• ポートフォリオの１つとして技術ブログを構築しておきたい方

TAKE THIS COURSE