Next.js - Flaches Routing
In Next.js bezieht sich flaches Routing auf das Navigieren zu derselben Seite, jedoch nicht auf Aufrufe der Methoden getServerSideProps, getStaticProps und getInitialProps.
Für flaches Routing verwenden wir Router mit flachem Flag als true. Siehe das folgende Beispiel.
Aktualisieren Sie die Datei index.js im Seitenverzeichnis wie folgt.
import Router from 'next/router'
import Head from 'next/head'
function HomePage(props) {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<div>Welcome to Next.js!</div>
<span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
<br/>
<div>Next stars: {props.stars}</div>
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
export async function getServerSideProps(context) {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
return {
props: { stars: json.stargazers_count }
}
}
export default HomePageStarten Sie Next.js Server
Führen Sie den folgenden Befehl aus, um den Server zu starten.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfullyÜberprüfen Sie die Ausgabe
Öffnen Sie localhost: 3000 in einem Browser und klicken Sie dann auf den Link Neu laden. Die folgende Ausgabe wird angezeigt.
