It is a React Framework and gives us the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed. Official website: https://nextjs.org/
🔍 What do you find here?
❯ yarn create next-app NAME
❯ yarn add typescript @types/react @types/node -D
❯ yarn dev
<aside> 👉 pages: each file inside this folder will be converted to a route on the application (it must be on the root or inside src, do not rename it) (the components here must be exported as default)
pages/_app: this component wrapper each page of the application (it reloads each time when the user changes the page)
pages/_document: similar to the app, the difference is it only load once (as index.html)
pages/api: each file inside this folder become a route
pages/api/users/[id].ts: get parameters from query (api/users/1), access request.query
router.asPath: get URL path (from next/router package)
getStaticPaths: generate URLs on the build time
getStaticProps: search data to page (props), the build time is static
getServerSideProps: search data to page as getStaticProps but it is on runtime - the bundle is on the server side
getInitialProps: search data to page as getStaticProps but it is on runtime - the bundle is on the client side
</aside>
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<link rel="preconnect" href="<https://fonts.googleapis.com>" />
<link rel="preconnect" href="<https://fonts.gstatic.com>" crossOrigin="anonymous" />
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
import Head from 'next/head';
export default function Home() {
return (
<>
<Head>
<title>Home | IgNews</title>
</Head>
<h1>Title</h1>
</>
);
}
import Link from 'next/link';
export default function Header() {
return (
<nav>
<Link href="/">
<a>Home</a>
</Link>
<Link href="/posts" prefetch> // pre-load the page
<a>Posts</a>
</Link>
</nav>
);
}