LIFF アプリを Next.js で動作させよう

export const getStaticProps = async () => {
  const posts = await fetchPosts()
  return {
    props: {
      posts,
    },
  }
}

export const getStaticProps = async () => {
  const posts = await getPosts()
  return {
    props: {
      posts,
    },
    revalidate: 10, // 👈 ここがポイント
  }
}

export const getServerSideProps = async () => {
  const posts = await fetchPosts()
  return {
    props: {
      posts,
    },
  }
}

import type { NextApiRequest, NextApiResponse } from 'next'

type Response = {
name: string
}

export default (req: NextApiRequest, res: NextApiResponse<Response>) => {
  res.status(200).json({ name: 'Hello, API Routes' })
}

import type { NextApiRequest, NextApiResponse } from 'next'

type Response = {
name: string
}

export default (req: NextApiRequest, res: NextApiResponse<Response>) => {
  res.statusCode = 200
  res.json({ name: 'Hello, API Routes' })
}

import { NextResponse } from 'next/server'

export function middleware() {
  const response = NextResponse.next()

  // ヘッダを設定する
  response.headers.set('x-modified-edge', 'true')

  return response
}

import { NextRequest, NextResponse } from 'next/server'

const allowedParams = ['hoge']

export function middleware(req: NextRequest) {
  const url = req.nextUrl
  let changed = false

  url.searchParams.forEach((_, key) => {
    if (!allowedParams.includes(key)) {
      url.searchParams.delete(key)
      changed = true
    }
  })

  // 許可されていない場合はリダイレクト
  if (changed) {
    return NextResponse.redirect(url)
  }
}

# create-next-app with JavaScript
npx create-next-app <アプリ名>

# create-next-app with TypeScript
npx create-next-app <アプリ名> --template typescript

npm install
yarn install

# next dev
npm run dev
yarn dev

module.exports = {
  //
}

openssl req \
   -newkey rsa:2048 \
   -x509 \
   -nodes \
   -keyout localhost-key.pem \
   -new \
   -out localhost.pem \
   -subj /CN=localhost \
   -reqexts SAN \
   -extensions SAN \
   -config <(cat /etc/ssl/openssl.cnf \
       <(printf '[SAN]\nsubjectAltName=DNS:localhost,IP:192.168.0.1')) \
   -sha256 \
   -days 3650

mkdir certificates
mv localhost-key.pem localhost.pem certificates

const express = require('express')
const next = require('next')
const https = require('https')
const fs = require('fs')

const port = parseInt(process.env.PORT || '3000')
const host = '0.0.0.0'

const app = next({
  dev: process.env.NODE_ENV !== 'production',
})
const handle = app.getRequestHandler()

;(async () => {
  await app.prepare()

  const expressApp = express()
  expressApp.get('*', (req, res) => handle(req, res))

  const hasCertificates =
    fs.existsSync('./certificates/localhost-key.pem') && fs.existsSync('./certificates/localhost.pem')
  const useHttps = process.env.HTTPS === 'true' && hasCertificates

  if (useHttps) {
    const options = {
      cert: fs.readFileSync('./certificates/localhost.pem'),
      key: fs.readFileSync('./certificates/localhost-key.pem'),
    }

    const server = https.createServer(options, expressApp)
    server.listen(port, host)
    console.log(`> Ready on https://localhost:${port}`)
  } else {
    expressApp.listen(port, host)
    console.log(`> Ready on http://localhost:${port}`)
  }
})()

# tree -a -I "\.DS_Store|\.git|\.github|\.idea|\.next|articles|books|out|node_modules|vendor\/bundle" -N

.
├── .env
├── certificates
│    ├── localhost-key.pem
│    └── localhost.pem
├── components
│    ├── Loading.tsx
│    ├── SendMessagesButton.tsx
│    ├── SignInButton.tsx
│    └── SignOutButton.tsx
├── lib
│    ├── AuthContext.tsx
│    └── AuthReducer.tsx
├── next-env.d.ts
├── next.config.js
├── package.json
├── package-lock.json
├── pages
│    ├── _app.tsx
│    ├── _document.tsx
│    └── index.tsx
├── public
├── static
│    ├── Home.module.css
│    ├── globals.css
│    └── tailwind.css
├── tsconfig.json
└── yarn.lock

# tree -a -I "\.DS_Store|\.git|\.github|\.idea|\.next|articles|books|out|node_modules|vendor\/bundle" -N

.
├── .env
├── certificates
│    ├── localhost-key.pem
│    └── localhost.pem
├── next-env.d.ts
├── next.config.js
├── package.json
├── package-lock.json
├── public
├── src
│    ├── components
│    │    ├── Loading.tsx
│    │    ├── SendMessagesButton.tsx
│    │    ├── SignInButton.tsx
│    │    └── SignOutButton.tsx
│    ├── lib
│    │    ├── AuthContext.tsx
│    │    └── AuthReducer.tsx
│    ├── pages
│    │    ├── _app.tsx
│    │    ├── _document.tsx
│    │    └── index.tsx
│    └── static
│         ├── Home.module.css
│         ├── globals.css
│         └── tailwind.css
├── tsconfig.json
└── yarn.lock