It’s not a secret that creating client-side JavaScript is pretty difficult these days. Next.js is a minimalistic framework for server-rendered React applications with zero setup and simple deployment!
● Server-rendered by default (better SEO) ● Automatic code splitting & lazy loading for faster page loads ● Simple client-side routing (page based) ● Webpack-based dev environment which supports Hot Module Replacement ● Able to implement with Express or any other Node.js HTTP server ● Customizable with your own Babel and Webpack configurations Next.js Features
Getting Started: What We Learned ● Setting up is simple and fast ● Comes baked in with helpful development features ○ Error handling ○ Hot Module Replacement ● Create a page by exporting a React component in pages/ ○ Pages = Top-level components ○ Use the filesystem as an API
● Use Link to do client-side routing ● Built-in client-side history support!! ● Code splitting, components are lazy loaded per page ● Prefetching pages with Link prefetch! (not shown) ○ Lazy Load components ahead of time ○ Great initial load performance of a website ○ Ahead-of-time download capabilities of an app Navigation: What We Learned
● Use shared components in your pages! ○ Common Headers, ○ Layouts, etc. ● Import components from NPM modules and use them (Link) Shared Components: What We Learned
● Dynamic pages with query strings ● Passing data through components with props ○ Page props ○ Parent component props ● Route masking Dynamic Pages: What We Learned
Server Side Support: What We Learned ● Extend routing functionality with a Node.js server ○ Access request object ○ Extend default Next.js handler ○ Custom routes
Fetching Data: What We Learned ● Fetch component data in getInitialProps ○ Isomorphic fetching (!) ● When we render the page on the server, ○ Fetch happens on the server ● When we navigate via client-side ○ Fetch happens on the client
In Closing ● Next.js makes it easy for you to get started with React. ● Give it a try! Especially if: ○ You’re new to the React ecosystem ○ You need an SSR application ○ You just want to get things done
yosriady
mski_iksm
blackbracken
javiergs
daiksy
hiro_y
andpad
tkmnzm
hyopt
hicka04
yutootsuka
gpsnmeajp
sji
jensimmons
addyosmani
moore
jrom
danielanewman
colly
soudai
jakevdp
smashingmag
davidbonilla
hursman
garrettdimon