Next.js 13で追加されたApp DirectoryとSupabaseを使用してブログを構築していきます。
App Directoryで組織的にコードを管理することにより、可読性や開発効率、セキュリティが向上します。
Supabaseはバックエンド機能を提供するクラウドサービスで、データベースにPostgreSQLを使用しています。
フロントエンドとバックエンドの境界がなくなるので、より効率的な開発が可能になります。
ブログを構築しながら、データの作成(Create)、読み出し(Read)、更新(Update)、削除(Delete)の方法を学んでいきましょう。

初級

Next.js 13新機能のApp DirectoryとSupabaseでブログ構築

supabase

はる@講師

DjangoをRenderにデプロイする方法を学習します。

Herokuへのデプロイは有料になってしまったので、Renderにデプロイします。

Herokuとほぼ同じことができます。

Renderは無料でも使用することができますので、ぜひ参考にしてください。

DjangoをRenderにデプロイする方法

Render

DjangoでGraphQLのAPIを作成する方法を学習し、React Nativeと連携するチュートリアルです。
Django GraphQLではTikTokのホーム画面に表示するための簡単な投稿用のモデルを用意します。
GraphQL APIをReact Nativeで読み込み、TikTokのホーム画面の動画を動的に変えれるようにしていきます。

DjangoでGraphQLが気になっている方は、ぜひ参考にしてください。

Django GraphQL入門とReact Native(TikTok)連携

GraphQL/ReactNative

React NativeでTikTokのホーム画面を作成するチュートリアルです。
スタイルはTailwindCSSを使用します。
画面を上下にスナップすると、次の動画が表示できるアプリです。
スナップするアプリを開発したい方は必見です。

スマホアプリが開発できるようになると、一気にアイデアの幅が広がります。
ぜひ参考にしてください。

React NativeでTikTokのホーム画面を開発

ReactNative

フルスタックチャンネルをご利用頂きありがとうございます。

新しい講座のお知らせです。

Next.js 13新機能のApp DirectoryとSupabaseでブログ構築
https://www.fullstackchannel.com/courses/24

Next.js 13で追加されたApp DirectoryとSupabaseを使用してブログを構築していきます。
App Directoryで組織的にコードを管理することにより、可読性や開発効率、セキュリティが向上します。
Supabaseはバックエンド機能を提供するクラウドサービスで、データベースにPostgreSQLを使用しています。
フロントエンドとバックエンドの境界がなくなるので、より効率的な開発が可能になります。
ブログを構築しながら、データの作成(Create)、読み出し(Read)、更新(Update)、削除(Delete)の方法を学んでいきましょう。
ぜひ参考にしてください。

よろしくお願いいたします。

🦐新しい講座のお知らせ

フルスタックチャンネルをご利用頂きありがとうございます。

新しい講座のお知らせです。

DjangoをRenderにデプロイする方法
https://www.fullstackchannel.com/courses/23

DjangoをRenderにデプロイする方法を学習します。
Herokuへのデプロイは有料になってしまったので、Renderにデプロイします。
Herokuとほぼ同じことができます。

Renderは無料でも使用することができますので、ぜひ参考にしてください。

よろしくお願いいたします。

🐸新しい講座のお知らせ

フルスタックチャンネルをご利用頂きありがとうございます。

新しい講座のお知らせです。

Django GraphQL入門とReact Native(TikTok)連携
https://www.fullstackchannel.com/courses/22

DjangoでGraphQLのAPIを作成する方法を学習し、React Nativeと連携するチュートリアルです。

Django GraphQLではTikTokのホーム画面に表示するための簡単な投稿用のモデルを用意します。
GraphQL APIをReact Nativeで読み込み、TikTokのホーム画面の動画を動的に変えれるようにしていきます。

DjangoでGraphQLが気になっている方は、ぜひ参考にしてください。

よろしくお願いいたします。

🦜新しい講座のお知らせ

フルスタックチャンネルをご利用頂きありがとうございます。

新しい講座のお知らせです。

React NativeでTikTokのホーム画面を開発
https://www.fullstackchannel.com/courses/21

React NativeでTikTokのホーム画面を作成するチュートリアルです。
スタイルはTailwindCSSを使用します。
画面を上下にスナップすると、次の動画が表示できるアプリです。
スナップするアプリを開発したい方は必見です。

スマホアプリが開発できるようになると、一気にアイデアの幅が広がります。

ぜひ参考にしてください。

よろしくお願いいたします。

🦄新しい講座のお知らせ

いつもお世話になっております。

https://www.fullstackchannel.com/questions/98

で質問をしました、Channelsを用いたアプリについての質問です。。

レイヤーにAWSのRedisを用いると、メッセージの送信は出来るのですが、
送信するとコネクションが切れてしまい、送信したメッセージの受信ができません。

エラーログを見ると下記のようになっています。

```
 [error] 5225#5225: *2111 upstream timed out (110: Connection timed out) while reading response header from upstream, client: ***.31.**.204, server: , request: "GET /ws/thread/****/ HTTP/1.1", upstream: "http://127.0.0.1:8000/ws/thread/****/", host: "*****.com"
```

送信後にオブジェクトは作成されているので、jsonの受信自体はできているようです。

```
	async def receive_json(self, data):
		[A]
        if 'rf' in data:
			await self.channel_layer.group_send( ← すべて送信される
				self.room_id,
				{
					'type': 'rf',
					'ids':data['ids'],
				}
			)
		else:
        [B]
			message_object = await self.createMessage(data) ← ここまでは処理される
			await self.channel_layer.group_send(   ←  この処理が送信されない
				self.room_id,
				{
					'type': 'chat_message',
					'message': message_object,
				}
			)
```

上記がwebsocketからの受信後の処理となっております。
[A]の処理は問題なく行えるのですが、[B]の処理となると接続が切れてしまいます。

[A]と[B]の処理の違いは、オブジェクトの作成の有無です。
Aはオブジェクトの作成は無く、またBはオブジェクトの作成と同時にメールの送信も行われます。

処理の重さによりコネクションが切れてしまっているのか、はたまた他の原因があるのか、調べてみたのですがなかなか原因が掴めず。。。

なお、RedisのTimeoutのパラメータは60秒に設定しています。

解決策をご教示頂けましたら幸いです。

---

尚、暫定的な処置として、BACKENDをInMemoryChannelLayerに設定をしております。
この場合はすべての処理が行われます。

なので、プログラムの問題では無いような気がしています。

```
CHANNEL_LAYERS = {
	"default": {
		"BACKEND": "channels.layers.InMemoryChannelLayer"
	}
}
```

Django

Python

Django Channelsでメッセージを送信すると、"Connection timed out"が発生する。

atnek

講座のリクエストはこちらからお願いします。

いいね数が多いリクエストから検討したいと思います。

リクエストのみの書き込みでお願いします。

### 例

「○○○が流行っているので、○○○を使ったチュートリアルが知りたい」

など

個人開発

🍀講座リクエスト掲示板

### 実現したいこと
- [Django REST Framework + NextJS + Google認証システム構築](https://zenn.dev/hathle/books/next-drf-blog-auth-book)
で作成した認証機能を用いて、DRFのAPIを実行したい。

### 発生している問題
- Google認証で認証でログイン後、取得したaccessTokenを用いてDRFのAPIを叩いても認証エラーになってしまう。
- ChromeののDevtoolsは下記の通りで、DRFからは401エラーが返ってきております。

![](https://gyazo.com/32ae23508415c15774d1711af15a777e)
 
```
code: "token_not_valid"
detail: "Given token not valid for any token type"
``` 


 
### ソースコード
- 認証機能周りは[Django REST Framework + NextJS + Google認証システム構築](https://zenn.dev/hathle/books/next-drf-blog-auth-book)に準拠しています。
- 一部、記事のとおりでは動かない部分があったので修正しています。

component.tsx (抜粋です)
``` typescript
import { getSession } from 'next-auth/react';

const DatasourceTableView: FC = () => {
  useEffect(() => {
    const fetchData = async () => {
      if (!data.length) {
        setIsLoading(true);
      } else {
        setIsRefetching(true);
      }
      const session = await getSession();
      // console.log(session.accessToken)
    
      const url = new URL(
        'api/v1/datamanagement/',
        process.env.NODE_ENV === 'production'
          ? 'https://www.material-react-table.com'
          : 'http://localhost:8000',
      );
      try {
        const response = await fetch(url.href,
          {
            headers: {
              'Authorization': 'JWT ' + session.accessToken,
            },
          }
          )
```

pages/api/auth/[...nextauth].ts
```typescript
import NextAuth from 'next-auth'
import GoogleProvider from "next-auth/providers/google";
import axios from 'axios'

const settings = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      secret: process.env.SECRET,
    }),
  ],
  callbacks: {
    async signIn({user, account}) {
      if (account.provider === 'google') {
        const accessToken = account.access_token;
        const idToken = account.id_token;
        try {
          const response = await axios.post(
            `${process.env.DJANGO_URL}/api/v1/social/login/google/`,
            {
              access_token: accessToken,
              id_token: idToken,
            }
          )

          const { access_token } = response.data
          console.log(access_token)
          user.accessToken = access_token
          return true
        } catch (error) {
          return false
        }
      }
      return false
    },

    async jwt({ token, account }) {
      if (account) {
          token.accessToken = account.access_token
      }
      // console.log(token)
      return token
    },

    async session({ session, token }) {
      session.accessToken = token.accessToken
      return session
  }
  },
}

export default (req, res) => NextAuth(req, res, settings)
```

### 自分で試したこと
- 表示されたaccessTokenを[このサイト](https://jwt.io/)でエンコードしようと思ってもinvalid Signatureになる
- ``curl -X GET http://localhost:8000/api/v1/datamanagement/  -H 'Authorization: JWT mytoken'``　と送っても同様のエラーが起きる

### 補足情報

Next.js

Django REST Framework + NextJS + Google認証システム構築 で作成した認証機能を用いて、DRFのAPIを実行したい。

hodakam

### 実現したいこと
Django入門ブログ新機能 レッスン1(画像アップロード機能)
において、画像投稿後に遷移する詳細画面での画像表示

### 発生している問題
画像投稿時（新規投稿および編集画面からの画像追加）、投稿ボタンをクリック後に画像が詳細画面に表示されないのですが、なぜでしょうか。
投稿後にホーム画面で一覧表示すると、画像はきちんと投稿されているのですが、投稿ボタンクリック後に遷移する画面（http://127.0.0.1:8000/post/●●/）にて画像が表示されません。
Pillowは最新版を使用しております。
ご教授頂けると幸いです。

### ソースコード　post_detail.html
```
{% extends "app/base.html" %}

{% block content %}

<h2 class="my-4">{{ post_data.title }}</h2>
<hr>
<p>{{ post_data.created }} by {{ post_data.author }}</p>
<hr>
{% if post_data.imge %}
<img src="{{ post_data.image.url }}" alt="" class="rounded detail-img">
{% endif %}
<p>{{ post_data.content|linebreaksbr }}</p>
{% if user.is_authenticated %}
<hr>
<div class="d-flex mb-5">
    <a class="btn btn-warning mr-2" href="{% url 'post_edit' post_data.id %}">編集する</a>
    <a class="btn btn-danger" href="{% url 'post_delete' post_data.id %}">削除する</a>
</div>
{% endif %}

{% endblock %}
```

### 補足情報
Pillowは最新版をインストールしました

初心者

Django入門ブログ新機能 レッスン1(画像アップロード機能)　詳細画面での画像表示について

ぽん

### 実現したいこと
ログイン時の「今週の予約」で動画のように一覧表示させたい。


### 発生している問題
「TypeError: 'datetime.date' object is not iterable」と表示されて、うまく表示されない。何のコードを間違っているか不明。


### ソースコード
mypage.htmlの「{% for booking in booking_data %}」を入力するとエラーが生じる。


### 自分で試したこと
{% for booking in booking_data %}を、
{% for booking in bookin_data %}など間違ったコードにすると、エラーは出ないが、「今週の予約」は一覧で表示されない。

### 補足情報
どうぞよろしくお願いいたします。