When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

Udemy logo

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

NotionをCMSとして運用できるブログを1から構築する講座。使用する技術はNext.js/NotionAPI/TailwindCSS。Notionにメモを残すついでにブログとして運用・投稿してみたい人にはオススメのブログ開発講座です。

     
  • 4.5
  •  |
  • Reviews ( 133 )
₹519

This Course Includes

  • iconudemy
  • icon4.5 (133 reviews )
  • icon4h 18m
  • iconenglish
  • iconOnline - Self Paced
  • iconprofessional certificate
  • iconUdemy

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

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

■ 本コースの対象者 ・React、Next.js等の基礎技術を学んだだけでは物足りない方 ・NotionAPIを活用してNext.jsと連携してブログ運用してみたい方 ・SSGやISRの概念や意味を実装を通して理解したい方 ・TailwindCSSを活用してレスポンシブ対応のスタイリングを学んでみたい方 ・ブログ運用におけるページネーションやタグ機能を実装してみたい方 ・Vercelへ環境変数を設定し、デプロイ後もブログ運用をしてみたい方 ・ただただWebアプリ開発好きで好奇心がある方 ・etc...

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

TypescriptやTailwindCSSも活用しているので、モダン技術のキャッチアップにもなります。 (ただ、Typescriptは省いている箇所が多いので各自設定していただくことになります。) Next.jsでSSGやISRを利用することでページ読み込み速度が劇的に変わります。それを実感していただく講座でもあります。また、ページネーションやタグ検索機能も実装していますので経験のない方は有益な講座になることでしょう。 最終的にはデプロイ公開してブログ運用してポートフォリオで転職活動にご利用いただいても構いません。 1から構築したブログでのアピールは評価に繋がるかなと思います。レイアウトは適宜カスタマイズしていただいても構いません。 ■ 本コースを受講する際の注意点 ・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へデプロイし、ブログを運用する方法が学べます Show moreShow less.