Next.js 13のコード変更点(パス取得/リダイレクト/リクエストbodyの解析など)
2023.05.18
目次

この記事の筆者:三好アキ(ウェブエンジニア)
「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。
ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。
Next.js v13の変更点
Next.js 13ではReactサーバーコンポーネント採用によりコードの変更点が多くなりました。
本記事では、私が個人的に運用している小規模サイトで、Next.js v12からv13へマイグレーションする中で加えたコードの変更を箇条書きで紹介します(移行作業は現在も進行中なので、本記事の内容は進捗に合わせて加筆していきます)。
なおv13の全般的な変更点(AppフォルダやgenerateStaticParams
など)については下記記事をご覧ください。
Next.jsバージョン13で導入されたAppフォルダを使った最新のNext.js開発に興味のある方は、今月(2023年6月)リリースした下記書籍を参考にしてください。
Next.js v13でパス取得
従来は次のように書いていました。
import { useRouter } from "next/router"
const Hello = () => {
const router = useRouter()
console.log(router.asPath) // /blog/first-article
return(
<div>
...
Next.js v13では次のようになります。
import { usePathname } from "next/navigation"
const Hello = () => {
const pathname = usePathname()
console.log(pathname) // /blog/first-article
return(
<div>
...
Next.js v13でリダイレクト
従来は次のように書いていました。
import { useRouter } from "next/router"
const Hello = () => {
const router = useRouter()
router.push("/success")
router.replace("/success")
return(
<div>
...
Next.js v13では次のようになります。
import { useRouter } from "next/navigation"
const Hello = () => {
const router = useRouter()
router.push("/success")
router.replace("/success")
return(
<div>
...
Next.js v13のAPIルート
従来は次のように書いていました。
/pages/api/hello.js
export default function hello(req, res){
return res.json("Hello!")
}
Next.js v13ではAppフォルダに合わせてフォルダ構成とコードが変わり、次のようになります。
/app/api/hello/route.js
import { NextResponse } from "next/server"
export async function GET(request) {
return NextResponse.json("Hello!")
}
Next.js v13でリクエストbodyを解析
従来は次のように書いていました。
/pages/api/hello.js
export default function hello(req, res){
console.log(req.body) // リクエストbodyの中身が表示
return res.json("こんにちは")
}
Next.js v13では次のようになります。
/app/api/hello/route.js
import { NextResponse } from "next/server"
export async function POST(request) {
const reqBody = await request.json()
console.log(reqBody) // リクエストbodyの中身が表示
return NextResponse.json("Hello!")
}
ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein。
monoteinについての案内資料の無料ダウンロードはこちら。
「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。
無料相談