Universal React apps in Next.js
- 1. Universal apps in Next.js
- 2. Contents 💣 Problems in React SPAs 💻 What is Next.js 💪 Main features and advantages 😿 And one disadvantage 💔 Alternatives 📚 Resources
- 3. Problems with SPAs SEO is a problem
- 4. Problems with SPAs SEO is a problem SSR could be hard Need to fetch initial data on server and pass it to client (redux helps)
- 5. Problems with SPAs SEO is a problem SSR could be hard Universal React could be hard Routing, different context runs the same code
- 6. Problems with SPAs SEO is a problem SSR could be hard Universal React could be hard Build system and performance 😭
- 7. Problems with SPAs SEO is a problem SSR could be hard Universal React could be hard Build system and performance Hard to extend fe. ejecting create-react-app
- 8. Next.js for a rescue Made by Quite popular Well maintained v5.x.x released recently
- 9. Next.js for a rescue Built on top of:
- 10. Next.js for a rescue 📤 Works out of the box & zero config 🕐 Is one dependency (+ react) 🐈 Easy to extend and to revert
- 11. Next.js for a rescue 💵 Both production build with server 🆒 and static site export 🚀 Many performance tricks ✂ Code splitting ⚡ Small size
- 12. Getting started npm install next react react-dom One dependency Dev server Production build & server npx next npx next build && npx next start
- 13. Project structure Required Next resolves / route by default
- 14. Project structure One view = one file Next resolves /blog
- 16. Project structure Overrides default document structure
- 17. Project structure Static files are served from here
- 18. Project structure Extend babel Set config and extend f.e webpack
- 19. Sample page Just a React component
- 20. Sample page Special Next lifecycle method
- 21. Sample page You can detect client or server You can get access to request and response!
- 22. Sample page I’m a thunk 🐘 Redux needs init on every page Store is injected to method Initial data fetching done before render
- 23. Extending base HTML Added styled-components
- 25. Extending babel
- 28. Disadvantage - routing / resolves to pages/index.js /blog resolves to pages/blog.js /blog?post=my-post resolves to pages/blog.js /blog/my-post doesn’t resolve
- 29. Disadvantage - routing / resolves to pages/index.js /blog resolves to pages/blog.js /blog?post=my-post resolves to pages/blog.js /blog/my-post doesn’t resolve
- 30. Custom server & routes
- 33. Thx bye