akinogu

/* CSS  */
.card {
  width: 400px;
  height: 300px;
  position: relative;
}
.image {
  width: 100%;
  height: 100%;
  object-fit: cover;

akinogu

<!-- HTML -->
<div class="card">
  <img class="image" src="image.jpg" alt="" />
  <div class="tag">Tag</div>
  <div class="description">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci error
    eos rem eum minus consectetur hic.
  </div>
</div>

akinogu

/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    buildExcludes: [/middleware-manifest.json$/],
    // 配列内にcache.jsの定義のようにObjectで書いていけばOK
    // 参考: https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.RuntimeCachingEntry
    runtimeCaching: [...]

akinogu

// pages/_document.tsx
import Document, { Html, DocumentContext, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {

akinogu

{
  "name": "Next.JS Progressive Web App Sample",
  "short_name": "next pwa sample",
  "theme_color": "#ffffff",
  "background_color": "#004740",
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "icons": [
    {

akinogu

import 'styled-components'

declare module 'styled-components' {
  export interface DefaultTheme {
    // ここに今回設定する型を定義
    color: string
  }
}

akinogu

import { useEffect } from 'react'
import styled from 'styled-components'
import { useTheme } from './util/Theme'

const Text = styled.div`
  color: ${p => p.theme.color};
`
const App = () => {
  const { setColor } = useTheme()

akinogu

import { createContext, useContext, useState } from 'react'
import { ThemeProvider as StyledThemeProvider } from 'styled-components'

const ThemeContext = createContext({
  setColor: (_: string) => {}
})

export const ThemeProvider: React.FC = ({ children }) => {
  // デフォルト値としてblueを指定
  const [color, setColor] = useState('blue')

akinogu

import styled, { ThemeProvider } from 'styled-components'

const Button = styled.button`
  color: ${p => p.theme.color}; // ← green
`
export const App = () => {
  return (
    <ThemeProvider theme={{ color: 'green' }}>
      <Button>Themed</Button>
    </ThemeProvider>

akinogu

## つまりどこ
### github pagesにdemo公開
https://akinogu.github.io/simple-react-slider/

#### 画像が表示されない
`file-loader`と`url-loader`をインストール。
file名を指定したいので、loaderにfile-loaderを指定し、`options.name`も追加。
outputPathも追加。

```js