- Updated UI
- Used MDX instead of MD for blog content
- Implemented Pagination
This is developed from the starter template for Learn Next.js.
- Next.js pages router
- Static Site Generation
- API Routes + Vercel Postgres
- Jest + React Testing Library
- Create
tsconfig.jsonunder root - Run dev server:
npm run devNext will install required packages for typescript usage - Convert app to use Typescript
- Create next app
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
- Navigate pages
Createdpages/posts/first-post.jsfile (need toexport defaultcomponent)
Route:/posts/first-post
- Code spliting
Each page only loads what’s necessary for that page. - Client-side navigation
- Page transition happens using JavaScript
- Create routes as files under pages and use the built-in Link component
- Page transition happens using JavaScript
- Prefetching (in production)
Whenever Link components appear in the browser’s viewport, Next.js automatically prefetches the code for the linked page in the background.
- Assets, Metadata, and CSS
- Image component
Added image underpublicdirectory- Image resizing and optimization (on-demand)
- Lazy load
- Avoid Cumulative Layout Shift
- Head component - modify
<head>of a page
Added Head component to first-post - Script Component - Add third-party JS
Exampe:<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" onLoad={() => { console.log(`script loaded correctly, window.FB has been populated`) }} /> - CSS modules - component level style
Added layout.js- Generates unique class names
- Code splitting ensures minimal amount of css is loaded for each page
- Gloabal styles
- Added
pages/_app.js- need to restart server - import global styles in
_app.js
- Added
- Styling tips
- toggle classes -
clsxlibrary - customize PostCSS config
- Add Tailwind CSS
- Using Sass
- toggle classes -
- Pre-rendering and data fetching
- Pre-rendering
- static generation - html generated at build time and reused for each request(except for dev mode)
- server side rendering - html generated on each request
- can be used when data needs to be up to date with each request
- data fetching
- This example used file system to store data in markdown files
- create utility functions(in
/libdirectory) to parse data files - can also fetch data from other sources, like external API, or query DB directly
- Implement
getStaticProps- pre-render with data- this method returns props that pass to the exported component
- this method only runs on server-side
- run at build time(in prod)
- fetch data at request time - server side rendering
- export
getServerSideProps
- export
- In the case of not needing to pre-render data (eg: Private, user-specific pages where SEO is not relevant)
- client side rendering
- SWR - react hook for data fetching
- Dynamic routes
- create
[id].jsinsidepages/posts- this is like accessing values of the object returned by
getStaticPaths
- this is like accessing values of the object returned by
- implement
getStaticPathsmethod - returns an array of possible id values- need to return an array of objects with
paramskey, and contain an object with the file name key, in this case, it isid. - can fetch data from external source
- need to return an array of objects with
- implement
getStaticPropsto fetch data with params id - catch all route
/posts/[...id].js- id value will be an array - custom 404 page
pages/404.js- statically generated at build time
- API routes
- Do Not Fetch an API Route from getStaticProps or getStaticPaths
- write your server-side code directly in getStaticProps or getStaticPaths (or call a helper function)
- preview/draft mode - bypass static generation
draft mode - dynamic API route
- Deploy app
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent