NEXT.JSのプロジェクト作成時にやる事まとめ

プロジェクト作成

npx create-next-app booking

JSPRETTIERの設定

yarn add prettier --dev

[
{ "keys": ["command+shift+h"], "command": "js_prettier" }
]

開発サーバ

http://localhost:3000

yarn install

yarn dev

AUTH0

npm install @auth0/nextjs-auth0

トラブルシューティング

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Module ‘”@auth0/nextjs-auth0″‘ has no exported member ‘UserProvider’. import UserProvider

上記2つの問題は以下で解決する。

import { useUser } from '@auth0/nextjs-auth0';

import { useUser } from '@auth0/nextjs-auth0/client';

MICROCMS

npm install microcms-js-sdk

import { createClient } from "microcms-js-sdk";
export const client = createClient({
	serviceDomain: process.env.SERVICE_ID || "",
	apiKey: process.env.API_KEY || "",
});

CRUD

export async function create() {
	try {
		const data = await client.create({
			endpoint: "booking",
			content: {
				name: "myname",
				starttime: "2023-02-24T13:54:00.670Z",
				finishtime: "2023-02-24T13:54:00.670Z",
			},
		});

		return data;
	} catch (err) {
		console.log(err);
	}
}

export async function getList() {
	try {
		const data = await client.getList({
			endpoint: "booking",
			queries: {
				fields: ["id", "name", "starttime", "finishtime"],
			},
		});
		return data;
	} catch (err) {
		console.log(err);
	}
}

export async function del(id) {
	try {
		const data = await client.delete({
			endpoint: "booking",
			contentId: id,
		});
	} catch (err) {
		console.log(err);
	}
}

export async function update(id) {
	try {
		const data = await client.update({
			endpoint: "booking",
			contentId: id,
			content: {
				name: "newname",
			},
		});
		return data;
	} catch (err) {
		console.log(err);
	}
}

DATE-FNS

npm install date-fns

import {parseISO, format} from 'date-fns'
import ja from 'date-fns/locale/ja'

const dateJA = format(parseISO(ISO8601DATA), 'yyyy/mm/dd', {locale:ja,})