NextJs

レイアウトを作成した際に、childrenの型の付け方がわからなかったので調べた。 const Layout = ({ children }) => { return ( <>{children}</> ); }; export default Layout; 修正方法 Propsの型定義を行うのはいつもの方法で行い、childrenの型はReactNodeで指定する。 import { ReactNode } from "react"; interface Props { children: ReactNode; } 上記の型をPropsの型に指定。 const Layout = ({ ch…

はじめに 実装 dockerでnode環境を作る create-next-appコマンドで自動プロジェクト生成 next.jsのサンプルアプリ作成 いろいろ試してみる 手動でnext.jsを作ってみる。 はじめに turborepoを用いた開発をするときに、next.jsを使おうと思ったのですが、まぁ全くやったことなかったので何もできませんでした。 なのでここで一旦キャッチアップしてからturborepoのキャッチアップをしようと思います。 実装 dockerでnode環境を作る まず環境を作る。 version: '3' volumes: node-modules: services: ap…

NextJS13のappディレクトリが便利そうですが変更点が多いようです。いざって時に使えるようにSSRの基本的な挙動を確認していきます。 ドキュメントはこちらに記載されてますが、まだ出来てないページもあります。 自分の手元のNextJSは13.2.3です。 セットアップ 最新のcreate-next-appを実行してインタラクティブに設定を入力していきます。設定値はこんな感じでappディレクトリをYesにして他はデフォルトのままにします。 ✔ What is your project named? … my-app ✔ Would you like to use TypeScript wit…

こんにちは、フロントエンドエンジニアの堀江（@nandemo_3_）です。 フロントエンドチームの業務改善の観点から、以前からissueに上がっていた本件を調査、対応しましたので備忘録として紹介いたします。 背景 フロントエンドチームが開発、運用しているSYNMNアプリの管理画面では、HTMLヘッダーのメタ情報に、package.jsonのversionを指定しております。 現状、こちらのバージョン管理は手動で行なっており、以前から手間という認識をしておりました。 緊急性は高くありませんが、業務改善となるので取り組んでみました。 現状 以下のように、package.jsonのversionをH…

Next.js+Jestの環境にFirebaseを入れてテストしようとしたところ、 Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will b…

こんにちは。Xイノベーション本部ソフトウェアデザインセンターの陳です。 CI推進活動の一環として、話題のCI/CDツールDaggerを使ってみました。 この記事では、DaggerでNext.jsプロジェクトのCIを構築して、ローカルとGitHub Actionsで実行する方法について紹介します。 Daggerについて みなさんはどのCI/CDツールを使っていますか？私が所属する部署ではGitHub Actionsを使うことが多いです。 従来のCI/CDでは、GitHub ActionsやCircle CIなどのサービスごとにCI/CDスクリプトを作成する必要があります。 移行するときには移行先…

Next.jsを使って、いい感じのWebサイトを作ってみたいです。 けど、Reactもわかっていないので、なかなか大変です。 少しずつ理解していきます。 プロジェクトを作成する まず、Next.jsを動かすプロジェクトを作成します。 以下をターミナルで実行します。 $ npx create-next-app myproject 「myproject」のところに自分のプロジェクトの名前を入れます。 意外に早く終わります。 Reactは時間がかかった印象があるので、さらに長いと思っていました。 プロジェクトを起動する 次にプロジェクトを起動します。 プロジェクトのディレクトリに移動して、以下を実行…

React Hook Formとreact-dropzoneを組み合わせた時にバリデーションを発火させるのに手間取ったのでメモ。知ってれば難しいことはない。 Next.jsのAPIでnodemailerを使ってメールを送るのアップデート版 textareaのinputをメール送信するだけの機能に、下記の要素を追加 選択肢を追加 ファイルのアップロードを追加（pdfに制限する） バリデーションを追加 機能の実現のために、下記のライブラリを追加した React Hook Form: form項目増えるので管理のため react-dropzone: ファイルアップロードをドラッグ＆ドロップで実現した…

REACT のデフォルトプロジェクトを作成 REACT の特性 ルーティング 挙動 リリース REACT の濃い作り REACT のデフォルトプロジェクトを作成 既存プロジェクトに入れるのではなく、基本セットとしてセットアップします。 npx create-next-app を打っとけばなんとかなるっぽい。 react.dev 設定は Typescripr 使わない、ESLint 使わない、Tailwind CSS 要らん、src ディレクトリよこせ、ルーターは欲しい、デフォルトの alias なんていちいち変更しません。 $ npx create-next-app √ What is you…

Storybookのv7がでてたのでアップデートしてみる。2023/5/18時点の7.0.12にアプデする。 リポジトリ 道のり 6 -> 7に移行し、起動できるようになるまで 公式の Migration guide for Storybook 7.0 のupgradeコマンドをたたくも、何故かupgradeされない 仕方ないのでpackage.jsonを自分で編集 Storybookをバージョン6から7への移行 の記事を参考2点実施 storybookコマンドを変更 @storybook/nextjsをinstall main.jsを編集 storyを編集 ここでstorybook起動するも…

自分用に フロントエンド開発のためのテスト入門 を読んだ備忘録を残しておきます。 以下、自分が付箋をはってた箇所をピックアップします。 備忘録 2-4 テスト戦略モデル テストピラミッドは有名で何度も聞いたことがあった。 アイスクリームコーン型・テストピラミッド型 今回紹介されていたのはテスティングトロフィー型というものだった。 Testing Libraryの開発者であるKent氏が提唱するテスト戦略モデルです。 効率よくテストを書くよりも、正しくソフトウェアが動作することを保証することが大切 ユニットテストよりもインテグレーションテストを充実させよう!! 単体でなく結合させてソフトウェアを…

プロジェクト作成 next バージョン 13.4.2 storybook バージョン 7.0.11 npx create-next-app@latest --ts npm i sb@latest type nextjs npm sb init Storybookのサンプル内のエラー修正 eslintで警告されたエスケープ処理を修正 &quot;args&quot; of child component stories 最近のNext.jsではデフォルトでサーバーサイドレンダリングの設定なので, クライアントレンダリングの設定を明記 "use client" Cloudflareでデプロイする際…

以前まではpages routerという仕組みが、app routerという機構となり、さらにstableとなった。 本記事は、next.jsを昔ちょろっと触ったことのある程度の筆者の、メモの役割程度のものなので、より詳しい情報が知りたい人は原文を読んでほしい。 nextjs.org 以下本文となります。 app routerではnext.jsの4つのprinciples: Zero setup. Use the filesystem as an API Only JavaScript. Everything is a function Automatic server rendering a…

Tauriが来そうな気がするので、なんか書いてみる。 Github GitHub - katakanan/tauri_life_game TauriではGUIのフロントエンドをいろいろなフレームワークで書ける。 Vanilla yew React Vue とかいろいろだが、プロジェクトを生成するときの選択肢によって、選べる幅が変わってくるらしい。 環境設定 WindowsなのでPowershellで作業する。 Cargo でcreate-tauri-appを入れる。 yarnを入れる。 プロジェクト生成 コマンドによってテンプレートプロジェクトを生成できるが、 とりあえずReactが出てくるの…

BitWardenはOSS（サムネイル用） 今週やったこと Vercelへのデプロイ 以前、学習用に作ったNext.jsのアプリをVercelにデプロイしてみました！簡単ですごい https://nextjs-random-cats-98qzg2pl4-lef237.vercel.app/ 拡張機能の影響でVercelのサイトがうまく動かないことがあったので別のブラウザに切り替えたりしました。 AtCoderの学習記録をZennのスクラップで付け始めました RubyでAtCoder Beginner ContestのAB問題を解いていくメモ帳 ちょこちょこ更新しています。 とりあえず安定してA…

概要 Web アプリやサービスを開発する際、UI 構築はどのように行っていますでしょうか？ 私自身は普段から React.js や Next.js を使用しており、UI 構築は Tailwind CSS を利用したり MUI を利用して簡単に作成してしまうことが結構多いです。 ja.reactjs.org nextjs.org tailwindcss.com mui.com そんな自分ですが、いつもと同じようなフレームワークだったりデザインを利用しているとどのサービスも同じような感じになってしまうのが欠点ですよね。 いつもと同じようなサービスやアプリにならないよう、新しいフレームワークだったり…

背景 ミドルウェア 主な使用用途 - Next.jsにおけるミドルウェア middleware.ts - ミドルウェアの定義 基本コード 処理の流れ NextRequestとNextResponse 例 - UserAgentを確認し、レスポンスに含めるミドルウェア関数 実際のソース 続く… コメント プログラミングスクールのご紹介 (卒業生より) 参考 背景 実務ではReactを使っているのですがNext.jsのキャッチアップしておきたいと思ったので、その内容を整理したいと思います。 本記事では、Next.jsに関する情報をまとめています。 内容は易しめです。 前回の続きになります！ ▶ N…

Next.js 実際チュートリアルをやってみた。 nextjs.org チュートリアルもそうなんだけれども、docsがかなり充実しているイメージ。 nextjs.org

背景 Next.jsアプリケーションのデプロイ Vercel デプロイ手順 Vercelのトップにアクセス GitHubのリポジトリを指定してアプリの連携を行う 設定画面からDeployを実行 上記画面の設定欄について デプロイ完了 アクセスしてみる リモートのmainブランチにpushしたら自動的にビルド・デプロイが走る 続く… コメント プログラミングスクールのご紹介 (卒業生より) 参考 背景 実務ではReactを使っているのですがNext.jsのキャッチアップしておきたいと思ったので、その内容を整理したいと思います。 内容は易しめです。 ▶ Next.js - SWR 前回の続きになり…