TypeError: Cannot read properties of null (reading 'pathname')

'use client';

import { usePathname } from 'next/navigation';

export default function Page() {
  // When URL is /blog/hello, pathname = '/blog/hello'
  // When URL is /dashboard?v=2, pathname = '/dashboard'
  const pathname = usePathname();
  return <div>{pathname}</div>;
}

// app/profile/page.tsx
export default function Index() {
  return <div>a</div>
}

// コメントアウトした元 page/profile.tsxのコード
// ...

import '@/styles/index.css'

./src/styles/index.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: pages/_app.tsx

error - ./src/styles/index.css
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;

const tm = require('next-transpile-modules')([
  'react-share',
  'react-use',
  '@heroicons/react/outline',
  'react-twitter-embed',
])

type Props = {
  posts: ComponentProps<typeof PostCardList>['posts']
}

const Index: NextPage<Props> = ({ posts }) => {
  return (
    <Layout title="パンダのプログラミングブログ">
      <SEOHead path="/" title="トップページ" type="website" />
      <Container size="md">
        <PostCardList posts={posts} />
        <div className="mt-20 flex justify-end">
           <BlogListButton />
        </div>
      </Container>
    </Layout>
  )
}

export default Index

export const getStaticProps = async () => {
  const allPosts = getAllPostsForCard()
  const postsFromFeeds = await getPostsFromFeeds()
  const sorted = allPosts
    .concat(postsFromFeeds)
    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
    .slice(0, 16)

  return {
    props: { posts: sorted },
  }
}

async function getPosts() {
  const allPosts = getAllPostsForCard()
  const postsFromFeeds = await getPostsFromFeeds()
  return allPosts
    .concat(postsFromFeeds)
    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
    .slice(0, 16)
}

export default async function Index() {
  const posts = await getPosts()

  return (
    <>
      <SEOHead path="/" title="トップページ" type="website" />
      <Container size="md">
        <PostCardList posts={posts} />
        <div className="mt-20 flex justify-end">
          <BlogListButton />
        </div>
      </Container>
    </>
  )
}

export const usePageView = () => {
  const router = useRouter()

  useEffect(() => {
    if (!existsGaId) {
      return
    }

    const handleRouteChange = (path: string) => {
      pageview(path)
    }

    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])
}

'use client'
import {usePathname, useSearchParams} from 'next/navigation'

function useNavigationEvent() {
   const pathname = usePathname()
  const searchParams = useSearchParams()
   useEffect(() => {
      const url = pathname + searchParams.toString()
      sendSomewhere(url)
   }, [pathname, searchParams])
}

'use client'

import { usePathname, useSearchParams } from 'next/navigation'
import Script from 'next/script'
import { useEffect } from 'react'

import { existsGaId, GA_ID, pageview } from '@/lib'

const usePageView = () => {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    if (!existsGaId) {
      return
    }
    const url = pathname + searchParams.toString()
    pageview(url)
  }, [pathname, searchParams])
}

const GoogleAnalytics = () => {
  usePageView()

  return (
    <>
      {/* Google Analytics */}
      {existsGaId && (
        <>
          <Script
            id="ga-url"
            defer
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
            strategy="afterInteractive"
          />
          <Script
            id="ga-script"
            defer
            dangerouslySetInnerHTML={{
              __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());    
              gtag('config', '${GA_ID}');
            `,
            }}
            strategy="afterInteractive"
          />
        </>
      )}
    </>
  )
}

export default GoogleAnalytics

import { GoogleAnalytics, Layout, Meta, SEOHead } from '@/components'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <Meta />
        <SEOHead path="/" title="トップページ" type="website" />
        <GoogleAnalytics />
      </head>
      <body>
        <Layout title="パンダのプログラミングブログ">{children}</Layout>
      </body>
    </html>
  )
}

import { useRouter } from 'next/router'

import { useSearchParams } from '@/hooks'

export const usePagination = (postCount: number) => {
  const router = useRouter()
  const asPath = router.asPath
  const page = useSearchParams('page')

  // 1ページ目にいる時の処理
  if (!page || page === '1') {
    const path = asPath.replace('?page=1', '')
    return { hasNext: postCount > 20, goNext: () => router.push(`${path}?page=2`), hasPrev: false, goPrev: () => null }
  }

  // これ以下は２ページ目以降にいるときの処理
  const hasNext = postCount / 20 > Number(page)
  const goNext = () => {
    const path = asPath.replace(`page=${page}`, `page=${Number(page) + 1}`)
    router.push(path)
  }

  const hasPrev = postCount > 20
  const goPrev = () => {
    const path = asPath.replace(`page=${page}`, `page=${Number(page) - 1}`)
    router.push(path)
  }

  return { hasNext, goNext, hasPrev, goPrev }
}

import { act } from '@testing-library/react'
import { renderHook } from '@testing-library/react-hooks'
import mockRouter from 'next-router-mock'
import singletonRouter from 'next/router'
import { expect, describe, test } from 'vitest'

import { usePagination } from '../usePagination'

describe('usePagination', () => {
  beforeEach(() => {
    mockRouter.setCurrentUrl('/posts')
  })

  test('1ページ目にいて、記事数は10のとき、前後に移動できない', () => {
    singletonRouter.push('/posts')
    const { result } = renderHook(() => usePagination(10))

    expect(result.current.hasNext).toBe(false)
    expect(result.current.hasPrev).toBe(false)
  })

  test('1ページ目にいて、記事数は30のとき、次に移動できる', () => {
    singletonRouter.push('/posts')
    const { result } = renderHook(() => usePagination(30))

    expect(result.current.hasNext).toBe(true)
    expect(result.current.hasPrev).toBe(false)

    act(() => {
      result.current.goNext()
    })

    expect(result.current.hasNext).toBe(false)
    expect(result.current.hasPrev).toBe(true)
    expect(singletonRouter).toMatchObject({ query: { page: '2' } })
  })

  test('2ページ目にいて、記事数は50のとき、前後に移動できる', () => {
    singletonRouter.push('/posts?page=2')
    const { result } = renderHook(() => usePagination(50))

    expect(result.current.hasNext).toBe(true)
    expect(result.current.hasPrev).toBe(true)

    act(() => {
      result.current.goPrev()
    })

    expect(result.current.hasNext).toBe(true)
    expect(result.current.hasPrev).toBe(false)
    expect(singletonRouter).toMatchObject({ query: { page: '1' } })

    act(() => {
      result.current.goNext()
    })
    act(() => {
      result.current.goNext()
    })

    expect(result.current.hasNext).toBe(false)
    expect(result.current.hasPrev).toBe(true)
    expect(singletonRouter).toMatchObject({ query: { page: '3' } })
  })
})

import { useRouter, usePathname, useSearchParams } from 'next/navigation'

export const usePaginationNew = (postCount: number) => {
  const router = useRouter()
  const pathname = usePathname()
  const params = useSearchParams()

  const page = params.get('page')
  const getPath = (addend: 1 | -1) => `${pathname}?page=${Number(page) + addend}`

  // 1ページ目にいる時の処理
  if (!page || page === '1') {
    return {
      hasNext: postCount > 20,
      goNext: () => router.push(`${pathname}?page=2`),
      hasPrev: false,
      goPrev: () => null
    }
  }

  // これ以下は２ページ目以降にいるときの処理
  const hasNext = postCount / 20 > Number(page)
  const hasPrev = postCount > 20
  const goNext = () => {
    router.push(getPath(1))
  }
  const goPrev = () => {
    router.push(getPath(-1))
  }

  return { hasNext, goNext, hasPrev, goPrev }
}

export async function generateStaticParams() {
  const posts = await getPosts();

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export default function Page({ params }) {
  const { slug } = params;

  return ...
}

export default async function PostPage({ params }: { params: { slug: string }}) { ...}

Error: Event handlers cannot be passed to Client Component props.
  <... href=... onClick={function} children=...>

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, // will be passed to the page component as props
  }
}

// not-found.tsx
export default function NotFound() {
  return "Couldn't find requested resource"
}

info  - Generating static pages (93/93)
info  - Finalizing page optimization  

Route (app)                                     Size     First Load JS
┌ λ /                                           0 B                0 B
├ λ /dev                                        277 B           107 kB
├ λ /policy                                     278 B           107 kB
├ λ /posts                                      278 B           107 kB
├ ● /posts/[slug]                               262 B           107 kB
├   ├ /posts/the-efficient-way-to-make-slides
├   ├ /posts/three-types-of-value-object
├   ├ /posts/translate-agile-manifest-casually
├   └ [+80 more paths]
├ λ /posts/hatenablog                           277 B           107 kB
├ λ /posts/note                                 278 B           107 kB
├ λ /posts/zenn                                 278 B           107 kB
└ λ /profile                                    277 B           107 kB
+ First Load JS shared by all                   65.3 kB
  ├ chunks/17-688acde8960a4e22.js               63 kB
  ├ chunks/main-app-5dbe79f35bd947e6.js         200 B
  └ chunks/webpack-496bd1f6f1d69ccc.js          2.1 kB

Route (pages)                                   Size     First Load JS
┌ ○ /404                                        179 B          82.6 kB
├ λ /api/feed                                   0 B            82.5 kB
└ λ /api/posts/[slug]                           0 B            82.5 kB
+ First Load JS shared by all                   82.5 kB
  ├ chunks/main-5fb8b04298eb25ee.js             80.2 kB
  ├ chunks/pages/_app-9f5490aa3d56632f.js       192 B
  └ chunks/webpack-496bd1f6f1d69ccc.js          2.1 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Route (pages)                                              Size     First Load JS
┌ ● / (612 ms)                                             616 B           170 kB
├   /_app                                                  0 B             170 kB
├ λ /404                                                   351 B           170 kB
├ λ /api/feed                                              0 B             170 kB
├ λ /api/posts/[slug]                                      0 B             170 kB
├ ○ /dev                                                   447 B           170 kB
├ ● /policy                                                508 B           170 kB
├ ● /posts (713 ms)                                        738 B           170 kB
├ ● /posts/[slug] (26659 ms)                               446 B           170 kB
├   └ css/969c3a144f2e23d6.css                             4.35 kB
├   ├ /posts/nextjs-storybook-typescript-errors (1022 ms)
├   ├ /posts/translate-agile-manifest-casually (886 ms)
├   ├ /posts/use-commitizen-commit-prefix (853 ms)
├   ├ /posts/bengo4com-library-frontend (747 ms)
├   ├ /posts/hygen-react (728 ms)
├   ├ /posts/renovate-gitlab (649 ms)
├   ├ /posts/monolith-note (628 ms)
├   └ [+76 more paths]
├ ● /posts/hatenablog (655 ms)                             335 B           170 kB
├ ● /posts/note (557 ms)                                   329 B           170 kB
├ ● /posts/zenn (588 ms)                                   330 B           170 kB
└ ○ /profile                                               334 B           170 kB
+ First Load JS shared by all                              176 kB
  ├ chunks/framework-3b5a00d5d7e8d93b.js                   45.4 kB
  ├ chunks/main-5882bdb81df34e52.js                        27.9 kB
  ├ chunks/pages/_app-139bbacceae3e303.js                  95.6 kB
  ├ chunks/webpack-8fa1640cc84ba8fe.js                     750 B
  └ css/b55b38315e73e24f.css                               6.56 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)