Download as PDF, PPTX
Uploaded byPatrick Smith
Atomic Design with Next.js
Next.js offers an opinionated approach to building React applications with server-side rendering handled automatically. It promotes an atomic design structure where the smallest reusable components are defined as atoms and molecules, with organisms bringing components together, and pages composed of organisms. Setting up a Next.js app is simple using create-next-app, and it supports features like static exporting, dynamic imports, and easy asynchronous data fetching through getInitialProps.
More Related Content
Similar to Atomic Design with Next.js
Atomic Design with Next.js
- 1.
- 2. Opinionated React 🤔 Reactis ever changing 🤔 There’s no one way to do things in React 🤔 People are trying to settle on a standard: React Router, Redux 🤔 Next.js offers an opinionated React — a trade off with big benefits
- 3. create-react-app 😍 Create ReactApp is amazing! 😍 Use it! It saves so much time with not just the set up, but because their config is so well done, you’ll get better error messages and debugging 😍 Client side only though
- 4. Server-side rendering ishard 🐞 Next handles isomorphic / universal / bipartisan / polyphonic rendering for you 🐞 Benefits of server rendering: 🐞 Better SEO 🐞 Faster user experience 🐞 Progressive: works in browsers without JavaScript
- 5. Next.js styling isdifferent 🍩 <style jsx>…</style> inside component 🍩 Supports all of CSS: media queries, keyframe animations, etc 🍩 Lean bundles and good hybrid server/client support 🍩 Only the styles for the current page will be served
- 6. Au Revoir ReactRouter 🛤 Each page has its own file in /pages 🛤 export default your React component from each file 🛤 Nest files in folders for subpaths 🛤 Maintenance is easy: just rename or remove the file! 🛤 Params are currently a bit funny
- 7. Async loading isincredibly easy ⚡ Just add getInitialProps() method to your page component, and await anything needed ⚡ The data is loaded before the page renders, and you receive it as props ⚡ Component.getInitialProps = async () => ({ items: await fetch(‘/api/items’) })
- 8. Basic structure ofNext.js 🌗 Components live in /components 🌓 Pages live in /pages
- 9. Similar concepts toAtomic Design Free book by Brad Frost — atomicdesign.bradfrost.com Atomic design breaks down designs into a system of components Components have different granularity, building up from atoms (the smallest indivisible pieces), to many atoms as molecules, smarter organisms, and finally templates & pages
- 11. Atomic structure 🍱 Atomslive in /components/atoms 🍱 Molecules live in /components/molecules 🍱 Organisms live in /components/organisms 🍱 Templates are pages before content is poured in 🍱 Templates/pages live in /pages
- 12. Simpler structure 🐺 Thought:Next.js promoted page components up 🐺 Atoms/molecules live in /components 🐺 Organisms live in /organisms 🐺 Pages live in /pages
- 13. Pure atoms &molecules 🐣 Atoms and molecules focus on rendering only 🐣 Makes testing easy: self contained, input → output 🐣 Implement using functional React components 🐣 Atom/molecule components live in /components
- 14. Smart organisms 🐙 Organismsbring atoms and molecules to life 🐙 Minimal responsibility for rendering 🐙 They focus on retrieving and sending data 🐙 API, GraphQL, local storage, etc 🐙 Organism components live in /organisms
- 15. Pages: lovely bunchof organisms - Organisms do most of the heavy lifting - Pages rely on one or more organisms - However, can be harder to get benefit of getInitialProps() when composing multiple smart components - Page components live in /pages
- 16. How to getstarted? 🦄 yarn create next-app Unicorn3000 🦄 yarn dev to start the hot reloading server 🦄 yarn build to produce production-ready files 🦄 Uses Next.js 2.0
- 17. Next.js 3.0 iseven better 🔥 🔥 Currently in beta 🔥 Worth using now! 🔥 Brings static exporting and dynamic importing
- 18. Create static websites 💃Actually not just websites, static progressive web apps with React goodness™ 💃 All your async getInitialProps() will be pre-fetched 💃 Your client React app in the browser then continues the dance
- 19. Dynamically import 🐝 LoadJavaScript on demand with import() 🐝 Lighter and faster initial loads 🐝 Dynamic — decide what to load and when
- 20.
- 21. Let me knowwhat you make! 🏁 Twitter: @concreteniche 🏁 GitHub: @BurntCaramel 🏁 I teach at Coder Academy — coderacademy.edu.au 🏁 I make design tools @RoyalIcing — icing.space 🏁 Recently released react-organism — lightweight (< 2KB) async state management