Atomic Design with Next.js
1 like3,319 views
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.
Atomic Design with Next.js
- 2. Opinionated React 🤔 React is 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 React App 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 is hard 🐞 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 is different 🍩 <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 React Router 🛤 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 is incredibly 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 of Next.js 🌗 Components live in /components 🌓 Pages live in /pages
- 9. Similar concepts to Atomic 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 🍱 Atoms live 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 🐙 Organisms bring 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 bunch of 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 get started? 🦄 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 is even 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 🐝 Load JavaScript on demand with import() 🐝 Lighter and faster initial loads 🐝 Dynamic — decide what to load and when
- 21. Let me know what 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