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

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

4.51 (53 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
Next.jsとNotionで高速で動く自作ブログを1から開発する実践マスター講座【デプロイ運用まで解説】
374
students
4.5 hours
content
Mar 2023
last update
$19.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へデプロイし、ブログを運用する方法が学べます

Description

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

Content

はじめに

本講座で学べること
本講座の完成品デモ

【Next.js】開発環境構築からはじめよう

VSCodeをインストールしよう
Node.jsをインストールしよう
【追加】本レクチャーのソースコード

Notionアプリの準備とNext.jsとデータベース連携

Notionアプリをインストールしてみよう
Next.jsを使ってプロジェクトの雛形を準備しよう
TailwindCSSをNext.jsに導入してみよう
Next.jsにTypescriptを導入してみよう
NotionAPI用にNotionデータベースを作成してみよう
NotionデータベースIDとトークンを取得するインテグレーション作業をはじめよう

NotionAPIとNext.jsでフロントエンド構築編

公式NotionAPI用ライブラリをインストールして使ってみよう
SSG(ISR)でNotionで投稿した記事を全て取得してみよう
記事タイトルやタグ取得用のメタデータ取得関数を作ってみよう
Notionに投稿している記事のタグを全て取得してみよう
TailwindCSSを使って記事内容をブラウザに出力してみよう
ブログ用にレイアウトを調整してみよう
【修正】ハイドレーションエラーになる場合の修正
全ページ共通のナビゲーションバーを作ってみよう
動的ルーディングでNotion記事詳細ページを作成してみよう
詳細記事のデータを取得するNotionAPIを実装しよう
SSG(ISR)ページにgetStaticPathsを設定してみよう
Slugのパス指定を動的に変更してみよう
notion-to-markdownライブラリを使って記事内容をマークダウンに変更しよう
ReactMarkdownライブラリでマークダウンをそのまま本文に書き換えてみよう
シンタックスハイライトでcodeタグを見やすく変更してみよう
記事本文の文字フォントと大きさ、ダークモードへ変更してみよう

Notionブログ運用を見据えたNext.jsページネーション・タグ機能実装編

Notionデータベースに10記事追加してみよう
トップページではブログ記事を4つだけ投稿するように変更してみよう
もっとブログを見る専用ページを作成してみよう
【修正】次の動画の修正点について
もっとブログを見る専用ページのレイアウトを変更してみよう
閲覧中のページ数によって出力するブログを変更してみよう
getStaticPathsを閲覧ページ番号に応じて変更させてみよう
forループを使って動的パス設定に対応させよう
ページネーション実装をはじめてみよう
ページ番号をページ数に応じて出力してみよう
【追加】ページネーション番号のリンクを設定しよう
タグ毎の詳細ページを作ってみよう
全記事に対してフィルターをかけて指定したタグの記事だけ出力してみよう
タグ詳細ページが出力されないバグを修正してみよう
タグ動的ページのgetStatiacPathsを設定してみよう
ブログで投稿している全てのタグを重複なしで取り出してみよう
タグ詳細ページ用のページネーションを実装してみよう
全記事リストまたはタグリストによってリンクさせる内容を変更してみよう
Topページにタグ検索コンポーネントを追加してみよう
タグ検索ができるようにタグのリンクを動的に変更してみよう
タグコンポーネントの追加と詳細ページのタグ検索リンクを追加しよう

【追加】Notionブログ運用をより快適にする追加設定

ブログを最新投稿順にソートしてみよう
公開・非公開設定を追加してみよう

開発したNotionブログをデプロイして運用してみよう

Githubでソースコードを管理してみよう
VercelへデプロイしてNotionブログを運用してみよう

ボーナスレクチャー

最後まで受講いただいた方へ
ボーナスレクチャー

Screenshots

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

Charts

Price

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

Rating

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

Enrollment distribution

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

Want FREE online courses ? Our CHROME extension lists Udemy freebies in realtime !

Free
SkillShare
SkillShare

Unlimited access to 30 000 Premium SkillShare courses

topics
30-DAY FREE TRIAL
5149456
udemy ID
2/10/2023
course created date
3/20/2023
course indexed date
Bot
course submited by