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.
const nextConfig = {
// ...
async rewrites() {
return [
{
source: '/get-started',
destination: SOCIAL_URL,
},
{
source: '/get-started/:path*',
destination: `${SOCIAL_URL}/:path*`,
},
]
},
}
products, pipelines, roadmaps, ...
is based on domain
headers, redirects, cookies, storage, ...
packages depend on each other
packages are independent
less tooling
more tooling
longer build
less-autonomy
autonomy
shorter build
git diff --quiet HEAD^ HEAD ./
{
"private": true,
"workspaces": [
"apps/*"
]
}
lazy load dependencies
import from external directory
import from external server
import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(() => import('../components/hello'))
const DynamicComponent = dynamic(() =>
import('@components/hello').then((mod) => mod.Hello)
)
const DynamicComponentWithNoSSR = dynamic(
() => import('@components/hello3'),
{ ssr: false }
)
const DynamicLazyComponent = dynamic(
() => import('@components/hello4'),
{ suspense: true }
)
function Home() {
return (
<div>
<Suspense fallback={`loading`}>
<DynamicLazyComponent />
</Suspense>
</div>
)
}
const nextConfig = {
// ...
experimental: {
externalDir: true
}
}
composite: true
const nextConfig = {
reactStrictMode: true,
experimental: {
urlImports: ['https://cdn.skypack.dev/'],
}
}
import confetti from 'https://cdn.skypack.dev/canvas-confetti'
module.exports = {
experimental: {
concurrentFeatures: true,
serverComponents: true,
},
}
import React, { Suspense } from 'react'
import Profile from '../components/profile.server'
import Content from '../components/content.client'
export default function Home() {
return (
<div>
<h1>Welcome to React Server Components</h1>
<Suspense fallback={'Loading...'}>
<Profile />
</Suspense>
<Content />
</div>
)
}
renders on the server
renders on the client
universal
By Atila