Next.js用の設定 2024/08

eslintの設定

必要なパッケージのインストール

npm install --save-dev eslint-config-next
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslint.json の設定

{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "root": true,
  "rules": {
    // 必要に応じてカスタムルールを追加
  }
}

package.jsonのlintスクリプトの更新

"scripts": {
  "lint": "next lint"
}

tsconfig.json の設定確認

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "lib": ["dom", "dom.iterable", "esnext"],
    "target": "es6"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Otsuka Noboru

prettierの設定

npm install --save-dev --exact prettier
echo {}> .prettierrc.json
touch .prettierignore

.prettierignore の設定

# Ignore artifacts:
build

# Other files
package.json
package-lock.json
Makefile

In addition, ESLint and Prettier rules may conflict with each other and interfere with each other's operation. To reduce this conflict, install eslint-config-prettier.

npm install --save-dev eslint-config-prettier

add .prettierrc.json

{
  "tabWidth": 2,
  "printWidth": 100,
  "semi": false,
  "singleQuote": true
}

add npm-run-all

npm install --save-dev npm-run-all

add scripts to package.json

...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "format": "run-p format:*",
    "format:eslint": "run-s \" lint:eslint --fix \"",
    "format:prettier": "run-s \" lint:prettier --write \"",
    "lint": "run-p lint:*",
    "lint:eslint": "eslint . --report-unused-disable-directives --max-warnings 0",
    "lint:prettier": "prettier \"**/*.(md|json|yml)\" --ignore-path .prettierignore --check",
    "fmt": "prettier --write **/*"
  },
...

VSCode Settings

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // フォーマッターをPrettierにする
  "editor.formatOnSave": true // ファイル保存時にフォーマットを実行
}

参考：https://qiita.com/enbanbunbun123/items/0827356d12b1bfa0e383

Otsuka Noboru

MapLibreJSの導入

install

npm install maplibre-gl

styled-componetsの導入

install

npm install styled-components
npm install --save-dev @types/styled-components

next.config.js ファイルを編集し、styled-componentsのコンパイラオプションを有効にします

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    styledComponents: true,
  },
}

export default nextConfig

サーバーサイドレンダリング(SSR)のサポートを追加するため、pages/_document.tsxファイルを作成または編集します

import Document, { DocumentContext } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: [initialProps.styles, sheet.getStyleElement()],
      };
    } finally {
      sheet.seal();
    }
  }
}

Otsuka Noboru

luma-aiの導入

install

npm install @lumaai/luma-web

Otsuka Noboru

Postgres on Vercel

参考）
» Vercel Postgres をさくっと試せる環境を作る https://zenn.dev/keita_hino/articles/33ea47e178a839

npm i @vercel/postgres
npm i -g vercel@latest

postgisの追加

-- PostGISエクステンションを追加
CREATE EXTENSION postgis;

-- PostGIS Topologyエクステンションを追加 (オプション)
CREATE EXTENSION postgis_topology;

-- PostGIS Rasterエクステンションを追加 (オプション)
CREATE EXTENSION postgis_raster;

テーブルの作成

DROP TABLE IF EXISTS open3d.objects;
DROP TABLE IF EXISTS open3d.datasets;


CREATE TABLE open3d.datasets (
    id SERIAL PRIMARY KEY,
    name VARCHAR(50) UNIQUE NOT NULL,
    description VARCHAR(100) UNIQUE NOT NULL,
    file_name VARCHAR(100) UNIQUE NOT NULL
);

CREATE TABLE open3d.objects (
    id SERIAL PRIMARY KEY,
	dataset_id INTEGER NOT NULL,
    name VARCHAR(50) UNIQUE NOT NULL,
    description VARCHAR(100) UNIQUE NOT NULL,
    url VARCHAR(100) UNIQUE NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (dataset_id) REFERENCES open3d.datasets(id)
);

開発用データの挿入

INSERT INTO open3d.datasets (name, description, file_name)
VALUES ('江東区 文化財一覧', '江東区の文化財一覧です', 'koto_cultural_properties.geojson');

INSERT INTO open3d.objects (dataset_id, name, description, url)
VALUES (1, '採荼庵跡', '採荼庵跡の松尾芭蕉像です', 'https://lumalabs.ai/capture/c07332cc-cfb7-4bb2-b4b8-e68dd13999ae');