フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

nextjs

Google reCAPTCHAの設定/ amplifyのauthの設定 

Google reCAPTCHA reCAPTCHA設定 https://www.google.com/recaptcha/intro/v3.html 画面上部の中央にある「Admin console」をクリックします。 amplifyに認証設定する amplify add authのコマンドを実行し下記の選択を行う $ amplify add auth Using service…

amplifyの環境でエラーが発生したので再度新しくサイトを構築

はじめに amplifyの開発を進めていたが、デプロイ時のエラーをどうしても解決できず、1度環境を壊して再構築した。 ※windowsのwsl環境で開発しております。 ローカルのnodejsを削除とインストール 環境を最新にする sudo apt-get update nodejsアンインスト…

Amplify+Nextjs環境構築

はじめに はてなブログをAmplify+Nextjs環境に移行するためにまず初めに環境構築を行う。 Amplify CLI のインストール npm install -g @aws-amplify/cli AWSアカウントの紐付け amplify configure リージョンの選択 Follow these steps to set up access to …

nextjsでgetStaticPropsとDynamic routesを使ってみる

サンプル 下記のjsonplaceholderを利用してブログページを作成してみる http://jsonplaceholder.typicode.com/posts nuxtjsで覚えておく getStaticProps サーバーサイドで実行され、pages内でのみ使用可能である npm run devで起動した場合、リクエスト毎に…

nextjs+tailwindcssで共通レイアウトの実装

共通レイアウト用のコンポーネント 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>

nextjsとtailwindcssのインストールと設定

nuxtjsとtailwindcssのインストール nuxtjsをインストール npx create-next-app . --use-npm tailwindcssだけインストールするとエラーが発生するため npm i tailwindcss (下記のエラーが発生する) npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to reso…

nuxtjs vuetifyとdotenvにインストールする(Windows/Docker構成)

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…