Next.js/TS/tailwindcss
初心者用まずは打って体で覚えよう
関連タイピング
-
Swift初心者用
プレイ回数33 英語長文614打 -
Reactを頑張ろう
プレイ回数919 英語長文120秒 -
TypeScript英単語タイピング(1分間ランダム)
プレイ回数308 英語短文60秒 -
Next.js英単語タイピング(1分間ランダム)
プレイ回数182 英語60秒
問題文
ふりがな非表示
ふりがな表示
(export default async function Home() {})
export default async function Home() {}
(<div className="m-auto w-96 md:w-[768px] px-1">)
<div className="m-auto w-96 md:w-[768px] px-1">
(return(<>{children}</>))
return(<>{children}</>)
(const [loading, setLoading] = useState(false);)
const [loading, setLoading] = useState(false);
('use client';)
'use client';
(import { useState, useEffect } from 'react';)
import { useState, useEffect } from 'react';
(useEffect(() => {},[]);)
useEffect(() => {},[]);
(const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/1/mydata?data=${data}`);)
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/1/mydata?data=${data}`);
(const json = await response.json();)
const json = await response.json();
(if (response.ok) { setData(json) })
if (response.ok) { setData(json) }
(const [data, setData] = <DataType|null>useState(null);)
const [data, setData] = <DataType|null>useState(null);
(const [error, setError] = useState<string | null>(null);)
const [error, setError] = useState<string | null>(null);
({error && (<div className="bg-red-100 border-red-500 text-red-700 rounded"><p>{error}</p></div>)})
{error && (<div className="bg-red-100 border-red-500 text-red-700 rounded"><p>{error}</p></div>)}
(<Image src={logo} alt="Logo" sizes="100vw" style={{objectFit: "cover",}} priority={false} />)
<Image src={logo} alt="Logo" sizes="100vw" style={{objectFit: "cover",}} priority={false} />
(import logo from "@/public/logo.png";)
import logo from "@/public/logo.png";
(import Image from "next/image";)
import Image from "next/image";
(<Suspense fallback={<Spinner color="border-green-500" />}> {children} </Suspense>)
<Suspense fallback={<Spinner color="border-green-500" />}> {children} </Suspense>
(<div className={`h-10 w-10 animate-spin rounded-full border-4 ${color} border-t-transparent`} />)
<div className={`h-10 w-10 animate-spin rounded-full border-4 ${color} border-t-transparent`} />
(console.log('json=>', json))
console.log('json=>', json)
(const drink = age >= 20 ? "Beer" : "Juice";)
const drink = age >= 20 ? "Beer" : "Juice";
など
(export interface User { id: string; name: string; })
export interface User { id: string; name: string; }
(export interface Admin extends User { role: "admin"; })
export interface Admin extends User { role: "admin"; }
(const fetchNews = async () => {})
const fetchNews = async () => {}
(const data = await getNews(3)
setNewsItems(data))
const data = await getNews(3)
setNewsItems(data)
(const [newsItems, setNewsItems] = useState<NewsItem[]>([]))
const [newsItems, setNewsItems] = useState<NewsItem[]>([])
({newsItems.map((item) => (
<NewsCard key={item.id} news={item} />))})
{newsItems.map((item) => (
<NewsCard key={item.id} news={item} />))}
(const categories = ["all", ...new Set(newsItems.map(item => item.category))])
const categories = ["all", ...new Set(newsItems.map(item => item.category))]
(await new Promise((resolve) => setTimeout(resolve, 1000)))
await new Promise((resolve) => setTimeout(resolve, 1000))