Atila
I'm on a mission to make code simple. When not recording screencasts or courses, you may find me either writing and talking about jamstack, performance, or developer tooling.
selected highlights
Nov 2021
dynamic imports
Exports don’t mix
named exports
export { Component }
default exports
export default Component
Exports don’t mix
named exports
default exports
const DynamicComponent = dynamic(() => import('../components/hello'))const DynamicComponent = dynamic(() =>
import('@components/hello').then((mod) => mod.Hello)
)
Image src
static import
path string
import Image from 'next/image'
import profilePic from '../public/me.png'
const Home = () => <Image src={profilePic} />
import Image from 'next/image'
const Home = () => (
<Image
src="https://path.com/image.png"
width={500}
height={500}
/>
)
⚠️
Image Allow-list
module.exports = {
images: {
domains: ['example.com', 'example2.com'],
},
}Performance
<Image
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
priority
/>add the priority property to the image that will be the Largest Contentful Paint (LCP) element for each page
No image size?
layout="fill"
adjust sizes with CSS
normalize images
when you own the service
modify API calls
when source has an image service
layout modes
intrinsic
scales down to fit container width
*up to image size
fixed
exactly set sizes
responsive
scales to fit container width
fill
scales to fit container width and height
configuration options
module.exports = {
// ...
images: {
// default sizes
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
// defaults image sizes
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
// options: "default", "imgix", "cloudinary", "akamai", "custom"
loader: 'default',
// configuration path to your loader
path: '',
domains: ['https://bla.com'],
// allow import images
disableStaticImages: false,
// default minimum cache time in seconds
minimumCacheTTL: 60
}
}Types of routes
beforeInteractive
before page is interactive
afterInteractive
load immediately after interactive
lazyOnload
load when page is idle
Multi-Zones
+ i18n
+ External Directory imports
compile-time scripts
sitemap
TypeScript
JavaScript
v14 +
experimental modules
Types of routes
static routes
dynamic routes
Algorithm
get static routes
get dynamic routes
⚠️
define:
priority and change frequency
create XML
write to /public
Convetions
/pages
page components
/pages/api
serverless functions
/public
static assets
JSON
XML
type sitemapEntry = {
path: string
changefreq: string
priority: number
}<url>
<loc>https://domain.com</loc>
<changefreq>monthly</changefreq>
<priority>1</priority>
</url>more Edge Functions
i18n default domain
module.exports = {
i18n: {
locales: ['default', 'en', 'de', 'fr'],
defaultLocale: 'default',
localeDetection: false,
},
trailingSlash: true,
}i18n default domain
import { NextRequest, NextResponse } from 'next/server'
const PUBLIC_FILE = /\.(.*)$/
export function middleware(request: NextRequest) {
const shouldHandleLocale =
!PUBLIC_FILE.test(request.nextUrl.pathname) &&
!request.nextUrl.pathname.includes('/api/') &&
request.nextUrl.locale === 'default'
return shouldHandleLocale
? NextResponse.redirect(`/en${request.nextUrl.href}`)
: undefined
}more examples
What’s Next?
Usage feedback
Black Belt [Day 6]
By Atila
