/** @type {import('next').NextConfig} */
module.exports = {
/* ... */
}
export interface ExperimentalConfig {
newNextLinkBehavior?: boolean;
swcMinify?: boolean;
nextScriptWorkers?: boolean;
reactMode?: 'legacy' | 'concurrent' | 'blocking';
externalDir?: boolean;
serverComponents?: boolean;
urlImports?: NonNullable<
webpack5.Configuration['experiments']
>['buildHttp'];
/*...*/
}
export function async get---Props () {
const src1 = await fetchSomething()
const src2 = await fetchOtherThing()
const src3 = await OmgAnotherRequest()
return {
props: {
data: { src1, src2, src3 }
}
}
}
{
props: {
data: { src1, src2, src3 }
}
}
Built time
goes to static file
{
props: {
data: { src1, src2, src3 }
}
}
Cold navigation
renders on the server-side
{
props: {
data: { src1, src2, src3 }
}
}
Client-side
fetches from single endpoint
export async function getStaticPaths() {
return {
paths: [],
fallback: 'blocking',
}
}
export async function getStaticProps() {
const data = fetchYourStuff()
return {
props: data
}
}
[slug].jsx
46s deploy
1001 routes
#useThePlatform
import { NextResponse } from 'next/server'
export function middleware() {
const response = NextResponse.next()
response.headers.set('x-modified-edge', 'true')
return response
}
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
}
MiCrOfRoNtEnDs
const nextConfig = {
reactStrictMode: true,
outputFileTracing: false,
experimental: {
urlImports: [
'https://cdn.skypack.dev/'
],
},
/*..*/
}
import confetti from 'https://cdn.skypack.dev/canvas-confetti'
❄️ All pages should be unique across zones
👮♂️ main app includes the rewrites to all other apps
🧭 secondary zones set basePath to their own main route
<Image
src={ginormousPrismicLogo}
priority
placeholder="blur"
alt="Prismic logo"
quality={100}
/>
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
externalDir: true
}
};
module.exports = nextConfig;
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@layouts/*": ["layouts/*"],
"@components/*": ["components/*"],
"@config/*": ["config/*"],
"@locales/*": ["locales/*"],
"@shared/*": ["../../shared/*"],
"@styles/*": ["styles/*"],
"@utils/*": ["utils/*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"next.config.js",
"../../shared/components/*.tsx"
],
"exclude": ["node_modules"]
}