DATA-WORLD-BLOG
2023-10-28
Next.js14_Node&Image
👤horomi
Next.js14のブログより
Now with Next.js 14, we want to simplify the developer experience of authoring data mutations. Further, we want to improve the user experience when the user has a slow network connection, or when submitting a form from a lower-powered device.
14では開発体験を簡単にしようとしてて、将来的にはユーザー体験も良くしたいって考えてるらしい👀
Forms and Mutations
API dir
import type { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(
req: NextApiRequest,
res: NextApiResponse,
) {
const data = req.body;
const id = await createItem(data);
res.status(200).json({ id });
}pages/api/submit.ts
import { FormEvent } from 'react';
export default function Page() {
async function onSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const response = await fetch('/api/submit', {
method: 'POST',
body: formData,
});
// Handle response if necessary
const data = await response.json();
// ...
}
return (
<form onSubmit={onSubmit}>
<input type="text" name="name" />
<button type="submit">Submit</button>
</form>
);
}pages/index.tsx
Server Actions (Stable)
Not API dir
export default function Page() {
async function create(formData: FormData) {
'use server';
const id = await createItem(formData);
}
return (
<form action={create}>
<input type="text" name="name" />
<button type="submit">Submit</button>
</form>
);
}app/page.tsx
Partial Prerendering (Preview)
Our challenge was to create a better developer experience, simplifying the existing model without introducing new APIs for developers to learn. While partial caching of server-side content has existed, these approaches still need to meet the developer experience and composability goals we aim for.
新たに勉強しなくっても使えるようにっていう配慮、素敵だね。
開発中だから、でき次第お知らせしてくれるみたい。でも、ブログには必要なさそう📝
Minimum Change
末尾の記述が関連してきそうな予感だけど、、、、今は大丈夫かな(ヒヤヒヤ
https://nextjs.org/blog/next-14#other-changes
必要な調整
yarn add next@latest react@latest react-dom@latest eslint-config-next@latestNode.js 18.17
https://nextjs.org/blog/next-14#other-changes
• Minimum Node.js version is now 18.17他のプロジェクトにも影響出そうだからHomebrew導入
brew install nvmmkdir ~/.nvm
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo '[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm' >> ~/.zshrc
source ~/.zshrcnvmセットアップ
nvm install 18.17.0nvm use 18.17.0特定バージョンを使用する
☝
どのプロジェクトでも使いたくなったら、
nvmが無いって言われたら
nvm use ***で指定すればいいnvmが無いって言われたら
brew install nvmだけやるbrowserslist update
npx browserslist@latest --update-dbNodeの非奨：非推奨の punycode モジュール
警告の原因調査
"scripts": {
"dev": "next dev",
+ "dev:trace": "NODE_OPTIONS='--trace-deprecation' next dev",
"start": "next start",一時的にtraceを入れてyarn dev:traceを実行すると、めっちゃ出る 🥶
出処は、notionhq/client
yarn upgrade @notionhq/client@latestimage.domains
詳細：
images: {
domains: [
's3.us-west-2.amazonaws.com',
'images.unsplash.com',
'cdn.buymeacoffee.com',
],
},この、domainsの部分を変更する。
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 's3.us-west-2.amazonaws.com',
},
{
protocol: 'https',
hostname: 'images.unsplash.com',
},
{
protocol: 'https',
hostname: 'cdn.buymeacoffee.com',
},
],
**** あと同じ *****画像少ないDWBブログではこの警告はなかったけど、herohoroブログでは出てたから対処DONE(/･ω･)/
deploy
deployのエラーは….
まだ調整が必要👀
ImageResponce
詳細：
next/serverからじゃなくってnext/ogからにする
import { ImageResponse } from 'next/og';これでOK＼(^o^)／