ジャムジャム！！Jamstack_2に登壇した際の発表資料です。 https://jamjamjamstack.connpass.com/event/226467/ ご質問あれば、Twitter: aiji42_dev までどうぞ。
はじめに 最近Next.jsが話題になることや、使われることが増えてきましたね。 個人的にも実務でも個人開発でも愛用しています。 そこでこの記事では、基本的なNext.jsプロジェクトのセットアップ方法についてまとめてみたいと思います。 セットアップ手順 Create Next App 不要なファイルを削除 srcディレクトリを追加 TypeScript導入 ESLint導入 Prettier導入 Chakra UI導入 Jest導入 Renovate導入 Cypress導入 Storybook導入 hygen導入 Create Next App まずはCreate Next App[1]で雛形を作成しましょう。 ターミナルで以下のコマンドを入力します。 必要であればこの段階でGitHubなどのリモートリポジトリと連携してください。（後にGitHub ActionsでCIを使用するところが
はじめに vivit株式会社でフロントエンドエンジニアをしている氏家です。 私は現在、アウトドア用品の中古品買取と販売を行うhinataリユースの内製システムの開発に携わっています。 www.hinatareuse.jp システムはNext.js + TypeScriptにUIコンポーネントライブラリのAnt Designを導入して開発されています。 このシステムに買取商品の情報を入力するフォームを実装する際、フォーム周りのステートやロジックをAnt Designに持たせたくないという意向があったので、React Hook Formを導入しフォームのステート管理やバリデーションを任せることにしました。 このReact Hook Form、yupを使用したスキーマバリデーションをサポートしていたり、UIコンポーネントライブラリが提供する制御されたコンポーネントにも対応していたりと、使い勝手が
こんにちはかみむらです。もしReactベースのフレームワークで、スタイルを構成する場合はCSS in JSライブラリを検討する思います。特に人気なのが、styled-componentsです。最近では採用しているプロダクトが増えてきています。 自分もstyled-componentsを利用する一人ですが、Next.jsで導入する場合少し癖があったので備忘録として残しておきます。 ドキュメント styled-components: Documentation 前提 TypeScriptベースで話を進めていきます。 Next.jsにTypeScriptを導入する記事はこちら code-log.hatenablog.com styled-componentsのインストール まずは、ライブラリをインストールします。 $ yarn add styled-componentsそして、TypeScrip
Authenticated server-side rendering with Next.js and Firebase Feb 24, 2021: a previous version of this post contained a bug where a new cookie would be created each time you signed out and back in again. These (identical) cookies would stack up cause problems. If you're having issues, pass the { path: '/' } option to nookies.set call — details below. I had a hell of a time figuring out how to get
今日は、firebaseに登録したユーザ情報の取得で苦戦したので、それを書き残しておこうと思います。 next.jsにはダイナミックルーターという動的にURLを指定できる機能がある。 例えば今回のプロフィールページに関して言えばpagesディレクトリ内にprofile/[username].tsxとファイルを作成してあげると、[username]の部分をユーザ名で指定してルーティングしてあげることができる。 /profile/user1と指定すると[username].tsxがあたかもuser1のためだけに作ったhtmlファイルのように振舞う。propsを上手く渡してあげれば、user1固有のデータを取ってきて表示することもできる。 今回はfirebaseを使用しているのでfirebaseのdisplayNameでルーティングしてあげれば楽勝と思っていた。いや、ルーティングだけなら楽勝だっ
この記事は下記のことについて書きます。 Next.jsにstyled-componentsの導入方法 Next.jsのbodyにglobalなcssの設定方法 参考にした記事はこちらになります。 styled-componentsを使ったCSS設計 これからのReactのスタイリングにはStyled Componentsが最高かもしれない Global styles and layouts styled-componentについて 「これからのReactのスタイリングにはStyled Componentsが最高かもしれない」に書かれているとおりになります。 cssの定義を、class属性を利用してカプセル化して再利用しやすいようにするための仕組みです。StyledComponentsもこの流れではありますが、外部cssファイルではなくjsxファイルに定義するためそのファイル内でReactコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
