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

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

4.35 (111 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
Next.jsとNotionで高速で動く自作ブログを1から開発する実践マスター講座【デプロイ運用まで解説】
795
students
4.5 hours
content
Jan 2024
last update
$49.99
regular price

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へデプロイし、ブログを運用する方法が学べます

Why take this course?

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を触ったことがある人だとスムーズに受講できると思います。

Screenshots

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

Reviews

たけのこきのこ
December 17, 2023
ずっと気になっていたNotionブログを構築できてとても満足です。 ただ実装面で同じ記述が多い点が気になってしまいました。 SSG、ISRを使おうとするとこれが普通なのかなと思いつつ、 AppRouterやRedux使いた〜い、、などという雑念と闘いながら受講完了しました(笑) これからちょっと改良するかもしれないですが、ベースができて満足です。 ありがとうございました!
堀本
September 10, 2023
TypeScript と言いながら充分な型定義がなされていないので次から次えとエラーが発生します。今までエラーが発生していなところまでエラになてしまします。自分の力では直して進めることは出来ません。もう少し丁寧な教材を作って欲しいと思います。
N
September 8, 2023
shinさんのUdemy講座を8-9個目修了です。 自分で英語ブログを作りたいと思っていたので、今回の講座はとても勉強になった。特にタグ検索の実装方法が知れたのがすごくよかったです。 教わったこと応用して、おしゃれな検索機能も自分で作っていきたい。
Leaf
May 29, 2023
星1を付けていますが、ドキュメントが少し不親切なNotionAPIの叩き方を学ぶ目的ならおすすめできます ただ、私が購入した時点では講義内容にTypeScriptが含まれていたものの実際の講座ではany型連発で殆どただのJavaScript、質問するも一か月以上音沙汰無し 他の人には返信していたのでそれを待っていたら返金期限過ぎていました 私の質問「だけ」無返答なんですが何か怒らせましたかね……?
バンプ
May 28, 2023
youtubeでShinさんのthree.jsの動画を勉強をするのが楽しく、それ以来いくつか講座を受講し勉強させて頂いています。今回も楽しい講座をありがとうございました。  Notionを全く使ったことがなかったのですが、DB以外の機能も充実しており、活用の幅広そうだと感じました。DB同士でリレーションを組むことができるそうなので、調べながらやってみようと思います。
浅野智貴
May 20, 2023
前の方でも行っていますが、型定義がまったくありません。これはts拡張子をもったjsです 実務で使うようなレベルではないです。かと言って動画内でも言っていますがかなり説明がハブられているので入門としてもおすすめしにくいです
勇拓
May 18, 2023
Next.jsの理解を深めたい人や復習をしたい人には、おすすめです。 残念な点は、プロジェクトでTypeScriptを使用しているので、もう少しTypeScriptで型定義があれば良かったです。また、タグでの記事一覧やページネーションなどの処理で、記事100件取得する関数を毎回使い回しているので、リファクタリングした方が良かったと思います。
杉田雅夫
May 15, 2023
Notionを使ったサイトに興味があって本講座を受講しました。 事前に本講座と同じ講師であるShin CodeさんのNext.js入門やTailwind CSSの講座を受講済です。 またTypescriptに関しては何となく型を付けるんだなと言う程度の知識です(写経は経験あります)。 概ね満足していますし自分で機能を付け足したりして楽しみましたが本講座はTypescriptで実装を進めて行くはずが型指定をしたり・しなかったりと言う事がありエラーが各所で出ます。 よって本講座は自身でTypescriptの型を指定できる方、または自身でTypescriptから型を抜いたりしてJavascriptに読み替えることが可能である方には受講をオススメできますが「ちょっと言ってることが分からない」と言う人は事前にTypescriptを何処かで入門してからにした方が良いかと思います。 自分は逆にこれを機にTypescriptに対して割と真面目に向き合い始めましたのでポジティブに全てのセクションを完了しましたが、この評価を読んだ人はネガティブに捉えず全ての人に万全では無いよと言うレベルのご注意程度で理解して頂けますと幸いです。
rikako
May 5, 2023
短い動画の単位でサクサク進んで成果物がテンポよくできていくので非常に楽しく進めることができました。私はTailwindCSSについては無知でしたが、雰囲気でわかったのでこれを機会にはじめて触るのでも問題ないと思います。 バグ修正も動画の中でしっかり見せてくれるのでよかったです。 シンプルな成果物なのでここからの拡張のし甲斐がありますね。これを使って学習を続けていきたいと思います。
March 24, 2023
めちゃくちゃ良き!Shin Code先生の教材は全部いい! 私は6つほど購入し4つ受講しましたが全部タメになってます。 こちらの教材についてですがレベルが高い! 初めてのNext.jsだったのでよくわからんとこもありましたがなんとかついていきました。(Next.js入門買いました今後やっていきます) 成果物についてなのですが、自分のサイトでアウトプットしていく にはおすすめだと思います!100%そのままじゃあまずいので 自分なりにアレンジして実際に今後アウトプット練習場として運用していこうかなと思います。 ありがとうございました!

Charts

Price

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

Rating

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

Enrollment distribution

Next.jsとNotionで高速で動く自作ブログを1から開発する実践マスター講座【デプロイ運用まで解説】 - Distribution chart
5149456
udemy ID
2/10/2023
course created date
3/20/2023
course indexed date
Bot
course submited by