Next.js Appフォルダでの変更点を20個、時短で紹介

"use client"

import { useState } from "react"

const Hello = () => {
    const [data, setData] = useState()

    return (
        <div>
            ...

import { usePathname } from "next/navigation"

const Hello = () => {
    const pathname = usePathname()
    console.log(pathname)  　　// /blog/first-article

    return(
        <div>
            ...

import { useRouter } from "next/router"

const Hello = () => {
    const router = useRouter()
    console.log(router.asPath)     　// /blog/first-article
    
    return(
        <div>
            ...

import { useRouter } from "next/navigation"

const Hello = () => {
    const router = useRouter()
    router.push("/success")
    OR
    router.replace("/success")

    return(
        <div>
            ...

import { useRouter } from "next/router"

const Hello = () => {
    const router = useRouter()
    router.push("/success")
    OR
    router.replace("/success")
    
    return(
        <div>
            ...

// app/api/hello/route.js

import { NextResponse } from "next/server"

export async function GET() {
    return NextResponse.json("ハロー")
}

// pages/api/hello.js

export default function hello(req, res){
    return res.json("ハロー")
}

export async function POST() {
    return NextResponse.json("ハロー")
}

export async function DELETE() {
    return NextResponse.json("ハロー")
}

import { NextResponse } from "next/server"

export async function POST(request) {
    const reqBody = await request.json()
    console.log(reqBody)        // リクエストbodyの中身が表示
    return NextResponse.json("ハロー")
}

export default function hello(req, res){
    console.log(req.body)      // リクエストbodyの中身が表示
    return res.json("ハロー")
}

import { NextResponse } from "next/server"

export async function GET(request, context) {
    console.log(context.params.id) 
    return NextResponse.json("ハロー")
}

const getSingleItem = async(req, res) => {
    console.log(req.query.id)
    return res.json("ハロー")
}

export default getSingleItem

const SingleBlog = () => {
    return (
        <h1>SingleBlogページ</h1>
    )
}

export default SingleBlog

export async function generateStaticParams() {

    // マークダウンファイルや外部データベースなどからURL名／ファイル名を取得するコード
    
    return paths
}

const SingleBlog = () => {
    return (
        <h1>SingleBlogページ</h1>
    )
}

export default SingleBlog

export async function getStaticPaths() {

    // マークダウンファイルや外部データベースなどからURL名／ファイル名を取得するコード

    return {
        paths: paths,  
    }
}

const getSingleItem = async(id) => {
    const response = await fetch("http://localhost:3000/api/item/readsingle/${id}") 
    const jsonData = await response.json() 
    const singleItem = jsonData.singleItem         
    return singleItem 
}

const ReadSingleItem = async(context) => {                        
    const singleItem = await getSingleItem(context.params.id)     
    return (
        <div>
            ....

// middleware.js

import { NextResponse } from "next/server"

export async function middleware() {
    return NextResponse.next()
}

export const config = {
    matcher: ["/about", "/api/item/create", "/api/item/update/:path*"],
}

// app/page.js

export const metadata = {
    title: "トップページ",
    description: "弊社はAI分野のリーディングカンパニーです。",
}

const Index = () => {
    return (
        <div>
            ...

// app/blog/[id]/page.js

export async function generateMetadata() {

    // マークダウンファイルや外部データベースなどからデータを取得するコード
    
    return { 
        title: data.title,
        description: data.excerpt,
    }
}

const SingleBlog = async() => {
    return (
        <div>
            ...

import Image from "next/image"
import profilePic from "./myself.png"
 
const Hello = () => {
    return (
        <Image src={profilePic} />
    )
}

// .env.local

URL = https://nextjsbook-fullstack-app-folder.vercel.app

fetch(`${process.env.URL}/api/item/readall`)

// .env.local

NEXT_PUBLIC_URL = https://nextjsbook-fullstack-app-folder.vercel.app

fetch(`${process.env.NEXT_PUBLIC_URL}/api/item/readall`)

// .env.development

NEXT_PUBLIC_URL=http://localhost:3000

// .env.production

NEXT_PUBLIC_URL=https://nextjsbook-fullstack-app-folder.vercel.app

// app/layout.js

import { Eczar } from "next/font/google"
// ⬆フォントを読み込み

const font = Eczar({ subsets: ["latin"] })
// ⬆フォントの設定

export default function RootLayout({ children }) {
  return (
      <html>
          　　　　　　　　　// ⬇フォントを適用
          <body className={font.className}>
              {children}
          </body>
      </html>
  )
}

import { Shantell_Sans } from "next/font/google"

const font = Shantell_Sans({ subsets: ["latin"] })

...

import { Advent_Pro } from "next/font/google"

const font = Advent_Pro({ subsets: ["latin"] })

...

import { Klee_One } from "next/font/google"

const font = Klee_One({ 
    subsets: ["latin"], 
    weight: "400",
})

...

// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: "export",     // 追加
};

export default nextConfig;