https://github.com/gomagoma676/nextjs-hasura-firebase-react-query

[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発 : Section 3 🚀
https://github.com/gomagoma676/nextjs-hasura-firebase-react-query

firebase hasura-graphql nextjs react-query

Last synced: about 2 months ago
JSON representation

[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発 : Section 3 🚀

• Host: GitHub
• URL: https://github.com/gomagoma676/nextjs-hasura-firebase-react-query
• Owner: GomaGoma676
• Created: 2021-06-16T10:42:34.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-08-30T09:31:23.000Z (over 2 years ago)
• Last Synced: 2024-04-24T10:14:33.589Z (8 months ago)
• Topics: firebase, hasura-graphql, nextjs, react-query
• Language: TypeScript
• Homepage:
• Size: 113 KB
• Stars: 9
• Watchers: 2
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 🌟 Project setup 🚀

## 1. create next app

### 1-1. yarn install *インストールしていない場合

    npm install --global yarn

    yarn --version

### 1-2.  create-next-app

    npx create-next-app . --ts

#### Node.js version 10.13以降が必要です。 -> ターミナル `node -v`でver確認出来ます。

### 1-3.  Redux toolkit のインストール

    yarn add @reduxjs/toolkit react-redux

    yarn add -D @types/react-redux

### 1-4.  各種moduleのインストール

    yarn add [email protected] universal-cookie @heroicons/[email protected]

    yarn add [email protected] react-query-devtools graphql graphql-request

### 1-5.  prettierの設定 : settingsでRequire Config + Format On Saveにチェック

    touch .prettierrc

~~~

{

    "singleQuote": true,

    "semi": false

}

~~~ 

## ~~2. TypeScript の導入~~

https://nextjs.org/learn/excel/typescript/create-tsconfig

### 2-1. 空のtsconfig.json作成

    touch tsconfig.json

### 2-2. 必要moduleのインストール

    yarn add -D typescript @types/react @types/node

### 2-3. 開発server起動

    yarn dev

### 2-4. _app.js, index.js -> tsx へ拡張子変更

### 2-5. AppProps型追記

~~~

import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {

    return 

}

export default MyApp

~~~

## 3. Tailwind CSS の導入

https://tailwindcss.com/docs/guides/nextjs

### 3-1. 必要moduleのインストール

    yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

### 3-2. tailwind.config.js, postcss.config.jsの生成

    npx tailwindcss init -p

### 3-3. tailwind.config.jsのcontent設定追加

~~~

module.exports = {

   content: [

    "./pages/**/*.{js,ts,jsx,tsx}",

    "./components/**/*.{js,ts,jsx,tsx}",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

~~~

### 3-4. globals.cssの編集

~~~

@tailwind base;

@tailwind components;

@tailwind utilities;

~~~