Memo

基本の機能
■Reactによる機能実装とTailwind CSSによる装飾

src/app/page.tsx
'use client'

import { useState } from 'react'

export default function Home() {
  const [name, setName] = useState('')
  const [message, setMessage] = useState('名前を入力してください。')
  const doInput = (e: any)=> {
    setName(e.target.value)
  }
  const doClick = (e: any)=> {
    e.preventDefault()
    setMessage('こんにちは、' + name + 'さん。')
  }
  return (
    <main>
      <h1 className="title">Next.js</h1>
      <p className="message">{message}</p>
      <form className="form">
        <input type="text" className="input" onChange={doInput} />
        <button className="button" onClick={doClick}>クリック</button>
      </form>
    </main>
  )
}


src/app/globals.css （追加分）

.title {
  @apply text-2xl font-bold m-5;
}
.message {
  @apply m-5;
}
.form {
  @apply m-5;
}
.input {
  @apply p-1 border-solid border-2 border-gray-400;
}
.button {
  @apply ms-1 px-4 py-2 bg-gray-800 text-white text-sm rounded-lg;
}
■ルーティングとページ遷移

src/app/page.tsx
'use client'

import { useState } from 'react'
import Link from 'next/Link'

export default function Home() {
  const [name, setName] = useState('')
  const [message, setMessage] = useState('名前を入力してください。')
  const doInput = (e: any)=> {
    setName(e.target.value)
  }
  const doClick = (e: any)=> {
    e.preventDefault()
    setMessage('こんにちは、' + name + 'さん。')
  }
  return (
    <main>
      <h1 className="title">Next.js</h1>
      <p className="message">{message}</p>
      <form className="form">
        <input type="text" className="input" onChange={doInput} />
        <button className="button" onClick={doClick}>クリック</button>
      </form>
      <div className="m-5">
        <Link href="/other" className="text-blue-600 underline">Other pageへ</Link>
      </div>
    </main>
  )
}


src/app/other/page.tsx
'use client'

import Link from 'next/Link'

export default function Other() {
  return (
    <main>
      <h1 className="title">Other page</h1>
      <p className="message">これは別のページです。</p>
      <div className="m-5">
        <Link href="/" className="text-blue-600 underline">戻る</Link>
      </div>
    </main>
  )
}
■ローカルCSS

ローカルCSSを作成し、「import './style.css'」で読み込むことができる
これで src/app/globals.css の内容が上書きされる

src/app/other/style.css
.title {
  @apply text-4xl text-red-600;
}


src/app/other/page.tsx
'use client'

import Link from 'next/Link'
import './style.css'

export default function Other() {
  return (
    <main>
      <h1 className="title">Other page</h1>
      <p className="message">これは別のページです。</p>
      <div className="m-5">
        <Link href="/" className="text-blue-600 underline">戻る</Link>
      </div>
    </main>
  )
}
■Styled JSX

src/app/other/page.tsx
'use client'

import Link from 'next/Link'
import './style.css'
import JSXStyle from 'styled-jsx/style'

export default function Other() {
  return (
    <main>
      <JSXStyle>
        {`p.message {
          text-align: center;
          font-weight: bold;
        }`}
      </JSXStyle>
      <h1 className="title">Other page</h1>
      <p className="message">これは別のページです。</p>
      <div className="m-5">
        <Link href="/" className="text-blue-600 underline">戻る</Link>
      </div>
    </main>
  )
}
■ダイナミックルーティング

src/app/list/[id]/page.tsx
'use client'

import Link from 'next/Link'

export default function List({params}:{params:{id: number}}) {
  return (
    <main>
      <h1 className="title">Lis page</h1>
      <p className="message">指定されたIDは「{params.id}」です。</p>
      <div className="m-5">
        <Link href="/" className="text-blue-600 underline">戻る</Link>
      </div>
    </main>
  )
}
http://localhost:3000/list/1 にアクセスすると「指定されたIDは「1」です。」と表示され、
http://localhost:3000/list/2 にアクセスすると「指定されたIDは「2」です。」と表示される

src/app/list/page.tsx
'use client'

import Link from 'next/Link'

export default function List() {
  return (
    <main>
      <h1 className="title">Lis page</h1>
      <p className="message">IDを指定してアクセスしてください。</p>
      <div className="m-5">
        <Link href="/" className="text-blue-600 underline">戻る</Link>
      </div>
    </main>
  )
}
http://localhost:3000/list/ にアクセスすると「IDを指定してアクセスしてください。」と表示される

■クエリパラメータ

src/app/query/page.tsx
'use client'

import { useSearchParams } from 'next/navigation'

export default function Query() {
  const params = useSearchParams()

  return (
    <main>
      <h1 className="title">Query sample</h1>
      <p className="message">パラメータの取得。</p>
      <ul className="m-5">
        <li>id: {params.get('id')}</li>
        <li>pass: {params.get('pass')}</li>
      </ul>
    </main>
  )
}
http://localhost:3000/query?id=test&pass=abcd1234 のようにアクセスすると、指定してidとpassの値が表示される
Memo

Advertisement
