A react framework can do static and server-side rendering. Automatic code split feature compile and export into chunks by each page entry points. So pages only loads the required code in order to improve the application’s initial load. Also prefetch is a nice feature happens in the background. Any <Link /> that is in the viewport (initially or through scroll) will be preloaded.
Data Fetching
It supports CSR, SSR, SSG and ISR(Incremental Static Regeneration).
We should use getStaticProps and getStaticPaths, if:
- Get required data needs to be available at build time, is ahead of user’s request.
- Good example: Data coming from headless CMS.
- Pages must be pre-rerendered (for SEO) and be very fast. Because it generates
HTMLandJSONfiles which can be cached by CDN for better performance. - Non user-specifc data want to be cached.
export const Post = ({ post }) => {
const router = useRouter()
if (router.isFallback) {
return <div>Loading...</div>
}
return (
<>
<h2>
{post.id} {post.title}
</h2>
<p>{post.body}</p>
</>
)
}
export async function getStaticProps(context) {
const { params } = context
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${params.postId}`
)
const data = await response.json()
if (!data.id) {
return {
notFound: true
}
}
console.log(`Generating page for /posts/${params.postId}`)
return {
props: {
post: data
}
}
}
export async function getStaticPaths() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts')
const data = await response.json()
const paths = data.map(post => {
return {
params: { postId: `${post.id}` }
}
})
return {
paths: [
{ params: { postId: '1' } },
{ params: { postId: '2' } },
{ params: { postId: '3' } }
],
fallback: true
}
}getStaticProps
Next.js will pre-render this page at build time using the props returned by getStaticProps.
getStaticPaths
When you export a function called getStaticPaths (Static Site Generation) from a page that uses dynamic routes, Next.js will statically pre-render all the paths specified by getStaticPaths.
getServerSideProps
When getServerSideProps exports as a standalone function, we can fetch those data must be fetched at request time (such as authorization or geo location). It runs only on the server-side and these data only be cached if “cache-control” headers are configured.
You can consider it’s a way to grab
Build-in CSS support
It allows you to import the CSS from a javascript file without extra configuration. The CSS from “node_modules” can simply import like below.
// pages/_app.js
import 'bootstrap/dist/css/bootstrap.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}CSS modules, sass, and less are also supported.
Image component and Image optimization
It offered a next/image component, is a expansion of the HTML <img> element. The image optimization can do resizing and serving the modern image format webp. It avoids transfer huge pictures with a smaller viewport. With the default “intrinsic” layout, images will scale the dimensions down for smaller viewports, but remain the original demensions for larger viewports. The optimization works with any picture rouce, no matter it’s from local or external.
- Improve performance: images can be resized and encoded on demand, or even it’s from external. It avoids unnecessary steps for creating different sizes of images.
- Responsiveness: images can be resized based on the screen size.
- Visual stability: the cumulative layout shift problem is automatically avoided. It’s a layout shift common issue.
- Faster page load: Next.js images will only be loaded when entering the viewport, being lazy-loaded by default.
- Better Google search rankings.
Middleware
Next.js Middleware allows you to run the code before a request is completed, then based on the incoming request, you can modify the response by rewriting, redirecting, adding headers, or setting cookies.