mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
4b66771895
The `legacyBehavior` prop of the `Link` component has been deprecated since #77473. For Next.js 16, we're finally removing support for it. Consequently, we're also removing support for the `passHref` prop, which was only useful in conjunction with the `legacyBehavior` prop. A [codemod is available](https://nextjs.org/docs/app/guides/upgrading/codemods#new-link) to help you automatically upgrade your codebase. reverts #77473 --------- Co-authored-by: Sebastian Sebbie Silbermann <[email protected]>
137 lines
3.5 KiB
JavaScript
137 lines
3.5 KiB
JavaScript
import Head from "next/head";
|
|
import Link from "next/link";
|
|
import useSWR from "swr";
|
|
import fetcher from "../lib/fetcher";
|
|
import Header from "../components/header";
|
|
import Footer from "../components/footer";
|
|
|
|
export default function Home() {
|
|
const { data, error, isLoading } = useSWR("/api/movies", fetcher);
|
|
|
|
if (error) return <div>failed to load</div>;
|
|
if (isLoading) return <div>loading...</div>;
|
|
if (!data) return null;
|
|
|
|
return (
|
|
<div className="container">
|
|
<Head>
|
|
<title>Next with Neo4j</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
|
|
<Header />
|
|
<main>
|
|
<div className="movies">
|
|
<div className="subtitle">
|
|
<p>
|
|
<strong>"Movies"</strong> Neo4j example dataset.
|
|
</p>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Movie Title</th>
|
|
<th>Released</th>
|
|
<th>Tagline</th>
|
|
<th>Directed</th>
|
|
<th>Actors</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.movies.map((movie, index) => (
|
|
<tr className="movie" key={movie.title}>
|
|
<th>{index + 1}</th>
|
|
<td>
|
|
<Link
|
|
href={`/movie/${encodeURIComponent(movie.title)}`}
|
|
className="link"
|
|
>
|
|
{movie.title}
|
|
</Link>
|
|
</td>
|
|
<td>{movie.released}</td>
|
|
<td>{movie.tagline}</td>
|
|
<td>
|
|
<ul>
|
|
{movie.directed.map((director) => (
|
|
<li key={director}>{director}</li>
|
|
))}
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<ul>
|
|
{movie.actors.map((actor) => (
|
|
<li key={actor}>
|
|
<Link
|
|
href={`/actor/${encodeURIComponent(actor)}`}
|
|
className="link"
|
|
>
|
|
{actor}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
|
|
<style jsx>{`
|
|
.container {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
padding: 0 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
main {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.subtitle {
|
|
margin-bottom: 25px;
|
|
text-align: center;
|
|
}
|
|
.movies {
|
|
flex: 1;
|
|
padding: 0 5rem;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border: 1px solid #dee2e6;
|
|
border-collapse: collapse;
|
|
border-spacing: 2px;
|
|
}
|
|
|
|
table thead th {
|
|
vertical-align: middle;
|
|
border-bottom: 2px solid #dee2e6;
|
|
border: 1px solid #dee2e6;
|
|
border-bottom-width: 2px;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
table tbody th,
|
|
table tbody td {
|
|
border: 1px solid #dee2e6;
|
|
padding: 0.75rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.link {
|
|
text-decoration: underline;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|