【NotionをCMSに】NotionAPI + Next.js + TypeScript でブログ開発〜デプロイまで
What you'll learn
- NotionをCMSとしたブログアプリケーションの運用
- Nextjsの基礎とデプロイ
- Notion APIの使い方の基礎
- NextjsとTypeScriptによる開発の基礎
Requirements
- Javascript、Typescriptの基本の理解
- HTML、CSSの理解
- Nextjs Create Next Appの実践済み
- Node開発環境
- Notionアカウント
- Githubアカウント
- Vercelアカウント
Description
本コースではNotion APIとNextjs(Reactjsフレームワーク)を使ってブログWEBアプリケーションを開発します。
題材はブログですが、NotionをCMSとして使用するという視点に立てば、いろいろな用途に応用できる内容だと思います。
本コースで扱う範囲などについて、無料プレビューで公開していますので事前にご確認くださいますようよろしくお願いいたします。
⚠️受講前の事前確認項目
セクション1では、始める前の準備等について載せています。本プレビューを含め、無料プレビューできますので、受講を決める前に必ずご確認ください。
本コースでは Notion API と Next.js を使ったブログを開発し、デプロイまで行います。
本コースを通して、Notion APIの導入、Next.js の基礎を学べます。
Nextjsの完全初心者の方は、まずは公式が用意している「create-next-app」のチュートリアルを実践してみたあと、受講を検討いただけますと幸いです。
プログラミングにおいてはライブラリ等のバージョンアップ・仕様変更でうまくいかなくなる可能性がどうしても発生します。Githubへコース通りのソースコードやバージョン情報を載せていますので、上手くいかない場合は合わせてみてください。
ご質問前に、Google検索などを使って解決にトライしていただけますと幸いです。
それでも上手くいかないときは、投げ出してしまう前にご質問いただければと思います。解決のサポートができる場合が多々あります。
講師の環境はMacです。Windows 環境による違いで上手くいかない場合などはご相談ください。
コース構成
コースの初めの方では、プロジェクトの準備を進めます。
はじめ〜コース前半は Next.jsによるアプリケーション開発を実践します。
コース後半からは、前半で作ったアプリケーションに Notion API を導入していきます。さらにパフォーマンスを目的とした Next.jsのSSGやISRなどを導入し改良していきます。
最終的にはデプロイを行います。デプロイは Next.js を開発している Vercelのホスティングサービスを使用します。
レクチャーの進め方
基本的には、動画レクチャーで解説した後、次のテキストレクチャーで修正を加えたファイルのコードを掲載しています。上手くいかない場合などは張り替えてみてください。
テキストレクチャーにおいてはコードの他、重要な情報や参照リンク、コマンドなども適宜載せています。
動画の音量、再生スピードは適宜調整してください。
Who this course is for:
- Notion APIを使ってみたい方
- NotionをCMSとして使いたい方
- Nextjsでブログを作りたい方
Instructor
はじめまして。
講師でプログラマーの藤本拓真と申します。
Udemy上にて、講座を公開させていただくにあたり、簡単に私とプログラミングの関わりを述べておきます。
私は、個人的な事業を行っている中で業務システムを作る必要が生じて、プログラミングの世界に入りました。独学で粘り強く学び続けることで、実際の業務に活かしたり、個人や企業さんからご依頼を受け納品もさせていただいてきました。プログラミングを通して貢献できる喜びは大きく、いつのまにかプログラミングの楽しさにハマってしまいました。
Udemyコースを制作するにあたり特に重視していることは、“理解しやすい講座にする”ということです。「なぜこうなるのか?」わかりにくい部分やつまづくポイントは、噛み砕いて細分化することで、私自身も悩みながら辿り着いた答えがたくさんあります。そのスキルが今私のUdemyのコースに凝縮されています。
プログラミングはUdemyだけでなく、仕事の幅も広げてくれました。某プログラミングスクール会社にて、講師としてオンラインリアルタイム講義を実施、システム制作のチーム開発への参画、現在もプログラマーとして業務を請け負っており、スマホゲーム・アプリ(Unity/C#)の開発およびリリースなども手がけています。
皆さんも、プログラミング自体の楽しさのようなものをぜひ再認識してコースをお楽しみいただければ嬉しい限りです。
*HPやTwitterでもプログラミング情報や特典等を掲載しています。
・現在使用している主な言語:
TypeScript / JavaScript
Python
C#
・現在使用している主なフレームワークやエンジン:
React
Next.js
Django / DRF
Unity