Next JS Tutorial
getStaticProps()
Used to fetch external data when the content depends on it
1. Navigating between pages
> Page <
A "page" is a React component which belongs to the "pages/" directory.
Pages are associated with a route based on the name of the file
eg.
- pages/index.js is associated with the route "/"
- pages/about.js is associated with the route "/about"
> Link Component <
In Next.js, you use tag which wraps around the tag to navigate with in the application.
<Link href="/">
<a>Back to home</a>
</Link>
"Link" component allows Client-side navigation. This means that page transition is handle by JavaScript which is faster than a normal navigation. No HTTP GET request is made
> Code splitting and prefetching <
Next.js does code splitting automatically. This means that when a page loads, only the necessary content for that page is served.
When a "Link" tag is encountered in a Next.js app, Next.js prefetches the code for the linked page in the background. So by the time you click on the link, content is fetched and allows instant page transition
2. Assets, Metadata and CSS
> Assets <
Static files like images can be served from the "public" directory. They can be accessed from the root of the directory just like "pages" directory.
Also a great place to store "robots.txt"
*robots.txt : a file which tells the crawler which files the crawler can or can't request from your site
> Metadata <
Metadata of the page which is usually specified in a "head" tag can be edited using <Head> tag in next.js.
<Head>
<title> Title of the page </title>
</Head>
*If you want to customize html attribute, eg. lang, you can do so by using <Document> tag
2. Dynamic Routes
When you want to have dynamic routes to pages where the route depends on the content.
- eg. posts/ where the id is the title of an article
How-to
Under /pages create a file [dynamic content].js.
Pages that begin and end with [] are dynamic pages in next js
=== What is async in JavaScript? ===
Summary
API Routes
Use Preview mode for previewing wordpress.