Qiita Trends – Telegram

Qiita Trends

3 subscribers

4.44K links

Unofficial qiita trend channel

source code: https://github.com/vbalien/qiita-trend-channel

Download Telegram

About

Blog

Apps

Platform

Next.js アプリを国際化（i18n）する方法
LGTM: 16
#I18n #TypeScript #next.js

Link: https://qiita.com/AkiUnleash/items/2b512b7a08b1229a4a88

Next.js アプリを国際化（i18n）する方法 - Qiita

「時代はまさにグローバル」とあえて言われることも無くなるぐらい、世界との繋がりが普通になっている現在。

とは言いつつも、アプリ開発するときに、英語や他の言語の対応はついつい後回しになってしまいますよね…。

だが、しかし！

Nex...

2 viewsedited 09:00

この記事を読む

【ReactとNext.jsの学習方法】fwywd（フュード）採用一次試験をcssも危うい初心者が学習した流れ
LGTM: 11
#React #next.js #tailwindcss #Vercel #fwywd

Link: https://qiita.com/takara03/items/59fc2fb81aa209b2f742

【ReactとNext.jsの学習方法】fwywd（フュード）採用一次試験をcssも危うい初心者が学習した流れ - Qiita

fwywd（フュード）の採用試験に挑戦したいけど、書いてある内容が呪文にしか見えない。
React・Next.js・tailwindcss・Vercel？？
JavaScriptも全くわからない初心者が学習した流れをまとめました。
プ...

1 viewedited 21:00

この記事を読む

【TailwindCSS＋React+Next.js】Next.jsでの画像の表示とアスペクト比の保ち方
LGTM: 3
#CSS #React #next.js #tailwindcss #fwywd

Link: https://qiita.com/takara03/items/f6a1cb57d3580feccc4e

【TailwindCSS＋React+Next.js】Next.jsでの画像の表示とアスペクト比の保ち方 - Qiita

はじめに

Next.jsのnext/imageを使用した静的ファイルの表示方法と、画像を表示させたさせた際に、画像の比率を維持することに困ったため、その方法を簡単にまとめました。

環境

OS：macOS Big Sur ...

2 views21:00

この記事を読む

【Next.js＋TailwindCSS】Next.jsにTailwindCSSを導入しtailwind.config.jsでカスタマイズする
LGTM: 6
#next.js #tailwindcss #tailwind.config.js #fwywd

Link: https://qiita.com/takara03/items/e6635250bd7a4116ab3b

【Next.js＋TailwindCSS】Next.jsにTailwindCSSを導入しtailwind.config.jsでカスタマイズする - Qiita

はじめに

TailwindCSSでコーディング時に同じ記述を何度も記述してしまい、汚くなってしまったので、繰り返し使用するクラスの作り方や使用したい色を設定する方法の一部をまとめました。

分かること

バックグラウンドにし...

1 viewedited 09:00

この記事を読む

React(Next.js)+WebAudioで簡単なオーディオプレイヤー+スペクトラムアナライザをつくる
LGTM: 32
#JavaScript #WebAudioAPI #React #next.js

Link: https://qiita.com/romot/items/afc0717a0d629ef0bebc

React(Next.js)+WebAudioで簡単なオーディオプレイヤー+スペクトラムアナライザをつくる - Qiita

趣味で音楽をつくっているのですが、
それ用の特設サイトをNext.jsでつくったのにあわせてオーディオプレイヤー(スペクトラムアナライザ付き)をReact+WebAudioでつくってみました。

実際の結果
https://romot...

3 viewsedited 10:00

この記事を読む

【クレジットカード不要】無料の最強構成でWebアプリを作ってデプロイする【Vercel + Heroku + MongoDB Atlas】
LGTM: 4
#Rails #Heroku #next.js #Vercel #MongoDBAtlas

Link: https://qiita.com/Toshihiro_Watanabe_/items/8cf5424f6571426c8b38

【クレジットカード不要】無料の最強構成でWebアプリを作ってデプロイする【Vercel + Heroku + MongoDB Atlas】 - Qiita

2021年10月時点でクレジットカード不要で利用できるサービスの中で最適だと思う組み合わせで、Webアプリ開発の環境構築からデプロイまで行います。

利用するホスティングサービス

Vercel

ReactのフレームワークNe...

1 viewedited 09:00

この記事を読む

【Next.js】Next.js 12について本気出して和訳してみた
LGTM: 8
#JavaScript #React #next.js

Link: https://qiita.com/nowvilla_physi/items/1424810ad1e2db5a4737

【Next.js】Next.js 12について本気出して和訳してみた - Qiita

Next.js 12について本気出して和訳してみた

Next.js 12がリリースされました！！！🎉
公式ページは英語となっておりますので、Next.js 12の内容を和訳していきます。

公式ページは以下となっております。
h...

1 view09:00

この記事を読む

Next.jsでLINEメッセージを送ってみる。【Let's ハンズオン！】
LGTM: 12
#Line #next.js

Link: https://qiita.com/fe_js_engineer/items/ac205d28909b387ef655

Next.jsでLINEメッセージを送ってみる。【Let's ハンズオン！】 - Qiita

流行のNext.jsを使ってLINEメッセージを送信してみるやで。

Next.js環境構築

まずはなにがともあれNext.jsのプロジェクトを立ち上げてみる。

npx create-next-app line-app --ty...

1 viewedited 21:00

この記事を読む

既存のプロダクトLPをサクッとCMS化させる話
LGTM: 1
#TypeScript #React #next.js #HeadlessCMS #microCMS

Link: https://qiita.com/hk206/items/68c2b303d423ace22f88

既存のプロダクトLPをサクッとCMS化させる話 - Qiita

こんにちは！
Another worksでフロントエンドエンジニアを担当しているみやぞんです！
今回は弊社のプロダクトLPをヘッドレスCMSに移行改善に関する取り組みをご紹介します！

弊社LPの導入事例記事の現在

弊社サービスL...

1 view21:00

この記事を読む

React（Next.js/GraphQL）からHasuraを使ったCRUD操作〜CRUDのD（Delete）について〜
LGTM: 3
#TypeScript #apollo #next.js #Hasura

Link: https://qiita.com/ryosuketter/items/12f376b626c107a1c3fa

React（Next.js/GraphQL）からHasuraを使ったCRUD操作〜CRUDのD（Delete）について〜 - Qiita

はじめに

React（Next.js/GraphQL）からHasuraを使ったCRUD操作を何回かに分けて見ていきます。

今回は、CRUDのD（Delete）について見ていきます。

最終的なゴール

以下のような構成のアプ...

1 viewedited 09:00

この記事を読む

【Next.js + Tailwind】これを押さえればOK 最新のフロントエンド開発
LGTM: 21
#Node.js #React #next.js #tailwindcss #fwywd

Link: https://qiita.com/akioqiita/items/d5726b00ce9d594b4c95

【Next.js + Tailwind】これを押さえればOK 最新のフロントエンド開発 - Qiita

目次

1.この記事を書くきっかけ
2.自己紹介
3.この記事を見てほしい人
4.Reactについて
5.Next.js + Tailwind cssの導入方法
6.Tailwind css
7.スクロールアニメーション
8.Ne...

1 viewedited 09:00

この記事を読む

関心の分離を意識したコードとは？
LGTM: 3
#React #next.js #関心の分離

Link: https://qiita.com/mu-suke08/items/4ee93df125db5d826d4e

関心の分離を意識したコードとは？ - Qiita

これはなに？

筆者がコードレビューを受けた際に学んだ「関心の分離」について記載しています。
もし違っている箇所がありましたら、優しさレベルマックスでコメントしていただけると助かります(ﾏｻｶﾘｺﾜｲ)。

作ったもの

実際...

1 viewedited 09:00

この記事を読む

Hasuraとsupabaseを使って認証まで。~ supabaseにclaimsの設定は要らなかった ~
LGTM: 9
#GraphQL #apollo #next.js #Hasura #Supabase

Link: https://qiita.com/toki_k/items/709a7701d11f9807279a

Hasuraとsupabaseを使って認証まで。~ supabaseにclaimsの設定は要らなかった ~ - Qiita

はじめに

Hasuraとsupabaseを使って認証までの方法を紹介します。
1部他の方の記事を貼って、そこを参照してもらってる部分があります。

HASURA_GRAPHQL_JWT_SECRETを設定する部分で少し詰まったの...

1 viewedited 21:00

この記事を読む

LintとTestをフル活用したNext.jsのテンプレ作成ガイド
LGTM: 10
#TypeScript #React #next.js #storybook #commitlint

Link: https://qiita.com/PonPon3/items/333e1f6e899576ab4195

LintとTestをフル活用したNext.jsのテンプレ作成ガイド - Qiita

1...2の...ポカン!

私は個人開発で小さなアプリを何度もこさえることがありますが、
その度に必要なパッケージをインストールしたり、設定ファイルを書くのは面倒です。

しかも、私の脳は１つ新しいことを学ぶと１つ前のものは...

1 viewedited 09:00

この記事を読む

ネットで知り合った仲間と農家の3代目の困りごとをFirebaseで解決した話
LGTM: 112
#JavaScript #Firebase #React #next.js #freeeAPI

Link: https://qiita.com/6983/items/818fa903e9ea0ac73230

ネットで知り合った仲間と農家の3代目の困りごとをFirebaseで解決した話 - Qiita

はじめに

※この記事はfreee APIで業務を楽しく便利にハックしよう！アドベントカレンダー2021の6日目の記事として投稿しています。

はじめまして。今年の1月からプログラミングの勉強をしているものです。
今回は、ネットで...

2 viewsedited 09:00

この記事を読む

目をでかくして誰でもアイドルみたいになれるアプリを作った
LGTM: 25
#Python #TypeScript #next.js #クソアプリ #AmazonRekognition

Link: https://qiita.com/yuikoito/items/28b47788f9c1590b7903

目をでかくして誰でもアイドルみたいになれるアプリを作った - Qiita

こんにちは、クソアプリ Advent Calendar 2021の7日目を担当します
Yuiです。

皆さんは撮った写真を見て、もう少し自分の目が大きければな〜〜〜と思ったり、うっかり目が半開きになっていたという経験はありませんか？？...

1 viewedited 09:00

この記事を読む

フリート芸術を後世に残すべくWebアプリを作った【Fleets Forever!!】
LGTM: 40
#TypeScript #React #next.js #クソアプリ #konva

Link: https://qiita.com/okumura_daiki/items/22d74d3d3c4c2b0001a9

フリート芸術を後世に残すべくWebアプリを作った【Fleets Forever!!】 - Qiita

今年もやって参りましたクソアプリ Advent Calendar 2021！8日目を担当します @okumura_daiki です。今年で参加4年目になるクソアプリストです。よろしくお願いします。

▼記事を読むのが面倒な人向け、今...

1 viewedited 09:00

この記事を読む

そうだ、表情筋選手権しよう。
LGTM: 16
#WebRTC #next.js #Agora.io #face-api.js #アドベントカレンダー2021

Link: https://qiita.com/water_resistant/items/e74b7b3c3cab24eee2d5

そうだ、表情筋選手権しよう。 - Qiita

こちらは「ライブ配信/ビデオ通話SDK（Agora）を使用したサービスのアイデアを大募集！【PR】V-CUBE Advent Calendar 2021」 13日目の記事になります。

参加条件の①こんなライブ配信があったら面白いので...

1 viewedited 21:00

この記事を読む

Jamstackな環境を構築 (Next.js + GraphQL + HeadlessCMS) ①
LGTM: 23
#GraphQL #next.js #JAMstack #strapi #HeadlessCMS

Link: https://qiita.com/sakenuma/items/8782c0ec16f3eed9d1a4

Jamstackな環境を構築 (Next.js + GraphQL + HeadlessCMS) ① - Qiita

- 調査・選定編 -

自己紹介

おはようございます。こんにちは。こんばんは。
現在、株式会社プロトソリューションで自社開発チームに所属しているスナガワです。
ITエンジニアってなんなん？そろそろ、名乗っていいんかな？
っ...

1 viewedited 09:00

この記事を読む

一日の空き時間を増やしてくれる最適化サービス
LGTM: 14
#next.js

Link: https://qiita.com/dala00/items/ce1e38c32e3084491278

一日の空き時間を増やしてくれる最適化サービス - Qiita

一日というのは短いです。誰もがなんとか時間を最適化して余暇を増やしたいと願っているものです。そんな要望にお答えして一日の空き時間を増やしてくれるサービスを開発しました。その名も「空き時間フエール」です。

どの様にして時間を増や...

5 viewsedited 21:00

この記事を読む