nextjs
Google reCAPTCHA reCAPTCHA設定 https://www.google.com/recaptcha/intro/v3.html 画面上部の中央にある「Admin console」をクリックします。 amplifyに認証設定する amplify add authのコマンドを実行し下記の選択を行う $ amplify add auth Using service…
はじめに amplifyの開発を進めていたが、デプロイ時のエラーをどうしても解決できず、1度環境を壊して再構築した。 ※windowsのwsl環境で開発しております。 ローカルのnodejsを削除とインストール 環境を最新にする sudo apt-get update nodejsアンインスト…
はじめに はてなブログをAmplify+Nextjs環境に移行するためにまず初めに環境構築を行う。 Amplify CLI のインストール npm install -g @aws-amplify/cli AWSアカウントの紐付け amplify configure リージョンの選択 Follow these steps to set up access to …
サンプル 下記のjsonplaceholderを利用してブログページを作成してみる http://jsonplaceholder.typicode.com/posts nuxtjsで覚えておく getStaticProps サーバーサイドで実行され、pages内でのみ使用可能である npm run devで起動した場合、リクエスト毎に…
共通レイアウト用のコンポーネント components/Laout.jsファイルを作成して下記のコーディングを行う import Head from 'next/head' import Link from 'next/link' export default function Layout({children, title= "HP by nuxtjs"}) { return ( <div className="flex justify-center items-center flex-col min-h-screen text-gray-600 text-sm font-mono"> </div>
nuxtjsとtailwindcssのインストール nuxtjsをインストール npx create-next-app . --use-npm tailwindcssだけインストールするとエラーが発生するため npm i tailwindcss (下記のエラーが発生する) npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to reso…
vuetify インストール 下記のコマンドでインストール yarn add @nuxtjs/vuetify --no-bin-links nuxt.config.jsに下記の記述を追記する $ vi nuxt.config.js modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', '@nuxtjs/vuetify' ], dote…