Pages are associated with a route based on their file name. For example, in development:
pages/index.js is associated with the / route.
pages/posts/first-post.js is associated with the /posts/first-post route.
pages/event/[id].js for dynamic routes(see below)
pages/404.js for custom 404 and [other errors](Error Pages)
import Link from'next/link'; //must have a tag insideexportdefaultfunctionFirstPost() {return ( <> <h1>First Post</h1> <h2> <Linkhref="/"> <a>Back to home</a> / </Link> </h2> </> )}
Yes that is all you need no imports, it somehow auto imports React and such
Next.js automatically prefetches the code for the linked page in the background.
Outer Component
Next.js specific top-level App component
Can keep state when navigating between pages, add global styles, etc
import Layout from'../../components/layout'exportdefaultfunctionPost() {return <Layout>...</Layout>}//prod build time, dev every requestexportasyncfunctiongetStaticPaths() {// Returns an array that looks like this:// [// {// params: {// id: 'ssg-ssr'// }// },// {// params: {// id: 'pre-rendering'// }// }// ]//If fallback is false, then any paths not returned by getStaticPaths will result in a 404 page.return {paths, fallback:false};}exportasyncfunctiongetStaticProps({ params }) {// Fetch necessary data for the blog post using params.id}
pages/posts/[...id].js matches /posts/a, but also /posts/a/b, /posts/a/b/c and so on.
functiongetStaticPaths() {//..return [ { params: {// Statically Generates /posts/a/b/c id: ['a','b','c'] } }//... ]}exportasyncfunctiongetStaticProps({ params }) {// params.id will be like ['a', 'b', 'c']}
Router
If you want to access the Next.js router, you can do so by importing the useRouter hook from next/router. Take a look at our router documentation to learn more.