GraphQL スターターパック | Prisma + NestJS + Next.JS製 個人ブログサイトをCloud Runで運用しよう 「GraphQLの仕様はなんとなく知っているけど、それを使ってどうアプリを作るのかいまいちイメージがわかない」 この本はそんなスキマを埋めるべく書きました。 近年ではReactをはじめフロントエンドの選択肢が豊富になっており、フロントエンドとバックエンド間のやりとりにはより汎用的かつ効率的な方法が求められます。 GraphQLはその選択肢のひとつです。本書では NestJS で GraphQLバックエンドを実装し、それをNext.jsから利用して、個人ブログサイトを構築してみます。 GraphQL開発の流れを体験し、ご自身のアプリ開発に役立ててください。 v1.10 refactor github deploy
というタイトルで先日 Kaigi on Rails 2021 で話してきました。 プレゼンで話せなかった内容なども含めてブログ記事にも書いておきます。 Intro Railsのことはけっこう知ってるけどNext.jsについて何も知らないという人をターゲットにしてNext.jsとは一体何なのか、いつどこで使えばいいのか、具体的にNext.jsのどういうところがいいのか、どういう機能があるのかという話をします。 最終的には普段Railsを書いているエンジニアが、Next.jsよさそうなんで使ってみようかな？と思ってもらえるといいかなと思っています。 Next.jsとは何か Next.jsのトップページを見てみましょう。 The React Framework for Production と書いてあります。これは読んで字のごとくですが、Next.jsというのはReactをベースにしたフレームワ
はじめに この記事は、筆者がOOPartsというプロダクトにおいて、Reactのアプリを 「Create React App」 から 「Next.js」 に置き換えた事例を記す内容となっています。 これまで 「0からのNext.jsアプリケーションの作成」 文脈における記事は多くありましたが、「Create React App」から「Next.js」という、 同じReact環境における移行記事 はそこまで多くなかったと認識しています。 ある程度育ちきっているプロダクトであれば、フレームワークごと移行することは中々困難になると思っていますし、それを成し遂げることはとてもチャレンジングなことです。その結果、事例としての大規模移行事例は中々存在しませんし、稀有なことだと思っています。 本記事におけるOOPartsのNext.js移行に関する知見は、今後大きな移行する人たちの参考になれば良いと思っ
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
今回は、Next.js で全体の設定ができる_document.js(tsx) と_app.js(tsx) について解説してききます ✍️ _document.js(.tsx) Next.js の Page コンポーネントはデフォルトでは<html>・<body>タグの定義を行いますが、それらを拡張したい場合は _document.js(tsx) を作成し、その中で Document コンポーネントを継承したクラスを実装しましょう。 class SampleDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx); return { ...initialProps }; } render() { return
Next.jsとAuth0を使って読んだ本を管理するサイトを作ったので使った技術等を紹介します。 github どんなサイトか？ まずは、どんなサイトを作ったのかを紹介します。読んだ本の管理を行うサービスで、主な機能は3つです。 Google Book APIに登録されている本を検索して本棚に保存できる 登録されていないなくてもアプリ内で新しく登録できる。 今まで本棚に登録した本の合計ページ数・本の高さ・本の重さを表示。1ページ当たり0.5g、0.15mmで計算します。 画面遷移 1.トップ画面 アプリのトップ画面。「アカウント作成・ログイン」ボタンを押すことでログイン画面に遷移します。 2.ログイン画面 Auth0を使ったログイン画面。認証方法は2種類あります。 Googleアカウントを使ったログイン メールを使ったログイン 3.ホーム画面 今まで読んだ本を管理する画面。最近読んだ本の表
suzukalight が 2020 年に使った技術スタックをまとめました。分類はこちらのサイトを基準にしています。 スケルトン生成create-next-app を Next.js でのスケルトン生成に使用し、 create-react-app を通常の React アプリで使用しています。ブログサイトには Gatsby.js を使っていました（いまは Next.js に置き換え） 昔は webpack 職人として社内で名を馳せておりましたが、今はビルドプロセスは可能な限り自分で触らないようにしています。本質的な価値を提供する作業ではないし、本職の人が作ったチューニングに自分たちが合わせていくほうがより良い UX も提供できると考えています。 状態管理API キャッシュ、アプリ状態管理、コンポーネント状態管理、の 3 つを考えれば良いと判断しています。Appllo InMemoryCac
Nuxt.jsだとmiddlewareという機能を使うことで、ページの遷移ごとに特定の処理をはさむことができます。 Next.jsで全ページで特定の処理をはさむためには、Appコンポーネント（_app.tsx）にその処理を書くことになります。 Next.jsの_app.tsxに全ページ共通の処理を書く 参考：Next.jsの_app.tsxのカスタマイズ（TypeScript） import type { AppProps } from 'next/app' import { useEffect } from 'react'; function MyApp({ Component, pageProps, router }: AppProps) { + useEffect(() => { + // ここに全ページ共通で行う処理 + },[router.pathname]) return <C
AmplifyがNext.jsとNuxt.jsを利用したSSR（Server Side Rendering）をサポートしました！ Amplify JavaScript adds server-side rendering (SSR) support for frameworks like Next.js and Nuxt.js これまで、AmplifyはSPAで構築するのが基本でしたが、SSRな構成をとることもできるようになり、選択の幅が広がったと思います！ このSSR環境をさっそく構築してみました！ 構成図 AmplifyでNext.jsを利用してSSR環境を構築するとこんな感じの構成になります。 Serveless Frameworkを利用して、Lambda@EdgeでレンダリングするSSR可能なCloudFrontを構築することで、SSRを実現しています。 構築してみた Amplif
![[アップデート]AmplifyがNext.jsとNuxt.jsを利用したSSR（Server Side Rendering）に対応しました！ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/194a9cfb6a3c1c20634fa9a82024d910930e4552/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F05%2Faws-amplify.png)
Prisma is a next-generation ORM that can be used to access a database in Node.js and TypeScript applications. In this guide, you'll learn how to implement a sample fullstack blogging application using the following technologies: Next.js as the React frameworkNext.js API Routes for server-side API routes as the backendPrisma as the ORM for migrations and database accessPostgres as the databaseNextA
今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー
https://nextjs.org/docs/advanced-features/custom-error-page を見て設定したが、特にstatusCode周りでハマったのでメモ。 pages/_error.tsxを作ると、SSR(Server Side Rendering)時やCSR(Client Side Rendering)時に例外が起きるなどした時やルーティングが存在しないエラーが発生した時に、そのページを表示してくれる このページで400エラー、404エラー、500エラーをハンドリングして、自前のページを作成すれば良い pages/_error.tsxはproduction環境時(next build -> next startした時)にしか使われないので注意。デバッグするときはnext buildをする必要がある statusCode算出周りはハマりどころなので、自前でや
Photo by Clément H on UnsplashなんかNextjsの情報古いNextjsのssrについて調べてるといつもExpressの構築も一緒にでてきてるけど今のNextjsってapi作成できるくない？どういうこと？？ってなったので調べてみた。バージョンはNextjs9です。 元々api機能はなかった？おそらく今みたいに/apiフォルダに作成すれば勝手にapiとして認識されるのではなくて、expressを使うことでapiを作成していた。それをサーバーにあげてNextjsでgetInitialPropsとかで取得して表示してた。 でもNextjs9からapiルーティングが可能になったのと、ssr、ssgになるPropsができたgetStaticPropsとかgetServersidePropsとか。 apiを動かすにはサーバーは必要やけどnextjsのapiをそのままlamb
はじめに CSSとしたがNext.jsにおけるスタイルの取り扱い方について。 公式ドキュメント見れば基本的なことはわかるのだがIssuesやDiscussionsを追わないと分かりにくいことも多いのでまとめる。 2020年9月版としたのはすぐにでも動きがありそうなため。将来的なこともなるべく記載する。 追記 2020/12/01 時点で特に情報が古くなっていないことを確認しています。 2020/12/10 Tailwind Support について記載しました。 Build-in CSS Support Basic Features: Built-in CSS Support | Next.js デフォルトでCSSのサポートがされている。かつては @zeit/next-css を導入する必要があったが今は必要ない。 Sassについても Before you can use Next.js'
この記事は React Advent Calendar 2019 の 9日目の記事です。 パンくずリストを ContextAPI で実装したら、使い方の勉強になったので実装方法をまとめました。 Next.js でデモを実装しているので、他の環境で利用する場合は少し置き換えが必要ですが、基本部分は変更せずに再利用可能です。 t-yng/react-breadcrumb-example デモ 目次 パンくずリストコンポーネントの作成 Contextの作成 Providerの作成 Hooks関数の作成 使い方 パンくずリストコンポーネントの作成 コンポーネントの描画イメージです reduce() で渡されたパンくずリストの要素の一覧を セパレーター（>） で結合をしています。 Linkコンポーネントは Next.js 依存なので、ここだけ自分の環境で適宜置き換えてください。 import Rea
例えばな next.config.jsこんにちは。この記事は Next.js Advent Calendar 2019 1日目の記事です。Next.js のアドカレやりたかったので勢いで作って、直接お会いしたことがない方で、この人は Next.js 使ってそうだ！という方に Qiita アドカレから招待を送っていました。エントリーいただいた皆さまありがとうございます。 ご存知ない方のために Next.js とは？という話をしますが、フロントサーバでの SSR を完備した React Framework です。デフォルトで AMP 対応が出来たり、TypeScript での実践にフレンドリーだったり、スタティックなエクスポートだったりも可能です。 ZEIT CEO @rauchg が Chrome Dev Summit 2019 のキーノートに登壇したりしていました（JSConf.jp でも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
