【カウントアップアプリ進化】 自作カウントアップアプリにて、データをsupabaseに保存することで、ページ読み込みで毎回リセットされなくなりました😂🙌 デザインの変更もできました〜！ イケてる感じでは無いと思いますが😳 #プログラミング学習 #supabase #vercel #nextjs pic.twitter.com/eNhaPG16nO

反映できてると嬉しい ぼちぼちPC表示の際のデザインも修正しないとな #個人開発 #reactjs #nextjs #typescript #駆け出しエンジニアと繋がりたい #駆け出しエンジニア #Webデザイナー #Web制作 pic.twitter.com/gjKIYNVx2y

タスクアプリできたー🙌 #駆け出しエンジニアと繋がりたい #typescript #reactjs #Nextjs #プログラミング学習 pic.twitter.com/cblDSP2l2D

おもれえええええ #React #Nextjs #駆け出しエンジニアと繋がりたい pic.twitter.com/PYiyrrmtW2

今日はNext.jsでキーマスタンドの予約管理システムを作ったよ @KeemaStand #KumaMCN #毎週ハッカソン #NextJS #TypeScript #TailwindCSS pic.twitter.com/AH6jSksZ8b

だいたいできた。 あとは画像差し替える🛠️ 久々にscss でかいた🫠 #jacascript #react #nextjs pic.twitter.com/o3nJ2UplpS

昨日進めていたTodoアプリの参考にしているチュートリアルです👀 このチュートリアル自体は素のReactで書かれているのでNext.jsのドキュメントも見ながら進めています youtu.be/nRCNL9T3J98?fe… #駆け出しエンジニアと繋がりたい #reactjs #Nextjs #今日の積み上げ

開発環境ではうまくfaviconを変更できたんだが本番に反映されて無い Next.jsはまだまだ把握しきれんわ homemade-apps.vercel.app #個人開発 #reactjs #nextjs #typescript #駆け出しエンジニアと繋がりたい #駆け出しエンジニア #Webデザイナー #Web制作 pic.twitter.com/c7zemGZFHX

#vercel #Nextjs ん？これは何？みんな来るもの？それとも迷惑メール？ pic.twitter.com/djFnZK5urT

Next.jsでチュートリアル定番のTodoアプリの作成中... とりあえずTodoを増やすところまで完了🙌 #駆け出しエンジニアと繋がりたい #プログラミング #プログラミング学習 #reactjs #Nextjs #typescript #今日の積み上げ pic.twitter.com/XWpUVZUd3F

【Next.js Appフォルダ】 ローディングの設定方法； fetch()などでデータ取得をするファイルと同じフォルダ内に「loading.js」ファイルを作ると、データ取得中にはそれが表示されるようになります。 #nextjs #プログラミング学習 #javascript pic.twitter.com/8CJPwqHaEF

【Next.js Appフォルダ】 メタデータの設定方法は2種類あります。 静的ページ（表示内容が常に同じ） →「metadata」を使います。 動的ページ（データによって表示内容が変わる） →「generateMetadata()」を使って、データ取得のコードを書く必要があります。 #nextjs #プログラミング学習 pic.twitter.com/D0QYMmiw75

【Next.js Appフォルダ】 静的サイトやサーバーサイドレンダリング時のデータ取得に使われていた「getStaticProps()」と「getServerSideProps()」は廃止され、データベースへの直接アクセスや「fetch()」でデータ取得を行えるようになりました。 #nextjs #プログラミング学習 pic.twitter.com/6PiBKpE4lO

【Next.js Appフォルダ】 動的ページのURL生成・登録のために使われていた「getStaticPaths()」は「generateStaticParams()」に変更されました。 #nextjs #プログラミング学習 pic.twitter.com/UGpkMzUbm3

【Next.js Appフォルダ】 layout.jsという名前のファイルを作ると、そのフォルダ内のすべてのフォルダとファイルに適用されるので、広範囲に適用したいスタイルや設定を書くのに便利です。 下記画像のようにlayout.jsを作ると、配下のsummer、winterにも適用されます。 #nextjs #プログラミング学習 pic.twitter.com/k13W9GG4Ce

【Next.js Appフォルダ】 バックエンドでURLのパラメータを取得したい場合、context.params.idを使って次のようにしましょう（なおcontextはカッコ内の2つ目の値として書く必要があるので、ここではrequestも追記） #nextjs #プログラミング学習 pic.twitter.com/yROkrKJ9w9

【Next.js Appフォルダ】 API開発時、リクエストに含まれるデータ（Body）はrequest.json()を使って確認しましょう。 #nextjs #プログラミング学習 pic.twitter.com/a7DazLqf18

【Next.js Appフォルダ】 APIルートでPOST／PUT／DELETE等のメソッド指定は、次のように明示して行いましょう。 #nextjs #プログラミング学習 pic.twitter.com/zMWB1lEXLJ

【Next.js Appフォルダ】 AppフォルダでAPI開発をするときのコードは次のようになります。下記は、GETリクエストを行うもっともベーシックなコードです。 #nextjs #プログラミング学習 pic.twitter.com/7I49C8M4UG

【Next.js Appフォルダ】 フロントエンドで、別ページにリダイレクトを設定したい場合、next/navigationを使って次のように書きましょう。 #nextjs #プログラミング学習 pic.twitter.com/JhbvhkdZhy

【Next.js Appフォルダ】 フロントエンド側でページのURLパスを取得したい場合、next/navigationを使って次のように書きましょう。 #nextjs #プログラミング学習 pic.twitter.com/d1mqY3Z86K

【Next.js Appフォルダ】 Appフォルダ内のReactサーバーコンポーネントでuseStateやuseEffectなどを使いたい場合には、ファイル冒頭に"use client"と書き、コンポーネントを従来の「クライアントコンポーネント」へと変更しましょう。 #nextjs #プログラミング学習 pic.twitter.com/zLXczinTiE

【Next.js Appフォルダ】 Appフォルダ内ではReactサーバーコンポネントがデフォルトです。従来のReactコンポーネント（クライアントコンポーネント）との違いは下記のようになっています。 #nextjs #プログラミング学習 pic.twitter.com/VBDUKQ2q8C

【Next.js Appフォルダ】 API開発を行うapiフォルダ内でも、フロントエンド側と同じように、フォルダの名前がURLに使われるという規則は同じです。 ここではフォルダ内に作ったroute.jsにコードを書きます。 #nextjs #プログラミング学習 pic.twitter.com/Az8lrzHXpX

【Next.js Appフォルダ】 Appフォルダではフォルダ名がURLとして使われ、コードはその中に作ったpage.jsに書きます。 動的ページ（ブログの記事ページやアイテムページなど）では、[id]や[slug]のように[ ]を使った名前をフォルダ名として使います。 #nextjs #プログラミング学習 pic.twitter.com/o98q8qs2P0

setCenter()で、マップ読み込み時の中心を指定。 const osaka = new google.maps.LatLng(34.669946804806614, 135.49839481688184); initializedMap.setCenter(osaka); #Nextjs #React #JavaScript #オリジナルアプリ開発 pic.twitter.com/SrHT4rtQSp

Next.jsとGoogle Maps JavaScript APIとmicroCMSを組み合わせて、microCMSに登録した住所を取得。さらに、ジオコーダーで緯度・経度取得して、マップ上にアイコン表示させることができた！！さらにもうちょい改善する。 #Nextjs #React #JavaScript #オリジナルアプリ開発 pic.twitter.com/H0lU7opyp6

Next jsで、ogp画像を生成してくれるapiできた とはいっても、vercel/ogを使ってるだけなんですけど笑 クエリパラメータの情報をもとにogpの内容を動的に変えられるので、ブログのogpとかに使えそう 参考 zenn.dev/hiromu617/arti… #エンジニア #nextjs pic.twitter.com/UFzs61lqsH

Next.js学習 左にしてみたけど動いた 縮まったからいいというわけではないのは分かるんだけど、 可読性悪いのかな？ 処理的に等価じゃないのかな？ then、returnが教材でいっぱいでてくるのはなぜなんだろう？ #駆け出しエンジニア #プログラミング初心者 #Nextjs pic.twitter.com/Wb7D75GGU6

Next.jsでコンポーネント化してgithubに変更をコミットしてPush。自動的にvercelでデプロイされている！ これって。。。レンタルサーバー不要ってこと？？？ #駆け出しエンジニアと繋がりたい #nextjs pic.twitter.com/eqnLsEWkTi

TailwindCSSで見た目をいい感じにして js.langchain.com/docs/expressio… #Claude #Opus #NextJS #TypeScript #TailwindCSS #LangChain #OpenAI #ChatGPT pic.twitter.com/my9d6i4myb

Next.js学習 普通のReactは分かるけどこいつら嫌い↓ async await, try catch, fetch(url, {通信方式？}), .json(), JSON.stringify() 意味は何となく分かるけど、どんな時にどんな引数でなぜ使うのか分かってない 例えば↓は何してるの？ #駆け出しエンジニア #プログラミング初心者 #nextjs pic.twitter.com/D57ZiGFpYu

なんもアイディアが思い浮かばないので今まで作ったwebアプリをまとめてみた まだ作りかけだけど homemade-apps.vercel.app #個人開発 #reactjs #nextjs #typescript #駆け出しエンジニアと繋がりたい #駆け出しエンジニア #Webデザイナー #Web制作 pic.twitter.com/Pp8gds5jzp

本日はシナップ月一勉強会！ シナップが効率的なサイト制作のために独自で開発、発展させているデザインシステムや開発環境などを今回は開発者目線でエンジニアが発表。実績をはじめ、利点や課題、今後のロードマップなどの共有を行いました！ #figma #microCMS #Nextjs #vercel pic.twitter.com/smSgx3yQwD

nextjsのローカリゼーション難しいな このサブパスは app/pages/ja/* ということでいいのかな？ そもそもcompileしないんだよな 何か設定が足りないけど、ドキュメントも足りない😇 PageRouterのドキュメントとAppRouterのドキュメントが入り混じってる 禿げそう #プログラミング #nextjs pic.twitter.com/ne14w9GQR7

【Next.js Appフォルダ】 静的サイトやサーバーサイドレンダリング時のデータ取得に使われていた「getStaticProps()」と「getServerSideProps()」は廃止され、データベースへの直接アクセスや「fetch()」でデータ取得を行えるようになりました。 #nextjs #プログラミング学習 pic.twitter.com/F9WPy7Ivr2

【Next.js Appフォルダ】 メタデータの設定方法は2種類あります。 静的ページ（表示内容が常に同じ） →「metadata」を使います。 動的ページ（データによって表示内容が変わる） →「generateMetadata()」を使って、データ取得のコードを書く必要があります。 #nextjs #プログラミング学習 pic.twitter.com/0vc2KtgHhr

NextAuthでGitHub認証できたよ #AWS #Amplify #TypeScript #NextJS pic.twitter.com/sOGRPS5qT7

【Next.js Appフォルダ】 API開発を行うapiフォルダ内でも、フロントエンド側と同じように、フォルダの名前がURLに使われるという規則は同じです。 ここではフォルダ内に作ったroute.jsにコードを書きます。 #nextjs #プログラミング学習 pic.twitter.com/OCUm18NJ45

【Next.js Appフォルダ】 フロントエンド側でページのURLパスを取得したい場合、next/navigationを使って次のように書きましょう。 #nextjs #プログラミング学習 pic.twitter.com/MnEXeKn5vT