TechTalk - 2o22 - Setting Next.js project for scalability

Next.js has quickly become one of the most in-demand skills in the web development space. This talk aims to act as a "practical" extension to the documentation and help you set up a project using many best practices that will improve your chances of keeping everything maintainable as you scale.

Transcript

1. Setting Next.js project for scalability
2. HypeTech Jobs Job opportunities at hype tech companies hypetechjobs.com | hypetech.io | reactweek.dev Marko Arsić Founder and CEO @ HypeTech Founder of HypeTech Education Lecturer @ ReactWeek.dev Independent Tech Consultant Helping companies set up teams and standardize the development process github.com/marsicdev
3. Scalability?
4. Scalability is the measure of a system’s ability to increase or decrease in performance and cost in response to changes in application and system processing demands.
5. The ability of a computer application or product (hardware or software) to continue to function well when it (or its context) is changed in size or volume in order to meet a user need. Typically, the rescaling is to a larger size or volume.
6. Scalability is NOT only applied on software or hardware system but also on a man power (team) working on it.
7. NEXT.js
8. “Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.”
9. Next.js is an all-in-one fullstack modern application building solution.
10. Includes first class support for Typescript and React, while offering easy solutions for some of the most common requirements in a modern application development
11. o1 Relatively easy to learn. o2 Built-in CSS support. o3 Automatic TypeScript support. o4 Multiple data fetching technique. o5 File-system routing.
12. Next.js has quickly become one of the most in demand skills in the web development space.
13. Let’s set up a project using a lot of best practices that will improve your chances of keeping everything maintainable as you scale your team and/or your app.
14. Project setup
15. Creating a Next.js can be done in a few ways, but the two are most common o1 With create-next-app o2 Manually.
16. Set a standard that will be used by all contributors to the project to keep the code style consistent and basic best practices followed
17. o1 Version control - Git setup - Git Hooks o2 Engine Locking - .nvmrc and .npmrc o3 Custom scripts - .package.json o4 VS Code Configuration - .vscode/settings.json o4 VS Code Debugging - launch.json
18. Code Formatting and Quality Tools
19. Set a standard that will be used by all contributors to the project to keep the code style consistent and basic best practices followed
20. Most of quality tools are only needed during development, so we add it as a devDependency with -D flag
22. ESLint statically analyzes your code to quickly find problems.
23. Prettier will take care of automatically formatting our files for us.
24. Most of quality tools are only needed during development, so we add it as a devDependency with -D flag
25. Directory Structure
26. Many people will have extremely strong opinions about directory structure, and for good reason!
27. Directory structure can really make or break a project in the long term when it gets out of control, especially when team members have to spend unnecessary time trying to guess where to put things (or find things).
29. Within components we will have subdirectories that kind of group similar types of components together. You can use any method you prefer to do this. (example mui)
30. Component Template and Layouts
31. Every single one of our components is going to follow this exact structure. Even if it does not use props it will still export an empty props interface for the component.
32. This will allow us to replicate this exact structure across many components and files, and interchange components/imports using the same expected pattern and just find/replace the names of the components.
33. consistency is everything
34. Layouts are an important concept in Next.js. They help you manage state between pages.
35. Documentation
37. Storybook gives us an environment to show off and test the React components we are building outside of the application we are using them in.
38. It's great tool to connect developers with designers and be able to verify components we have developed look and function as per design requirements in an isolated environment without the overhead of the rest of the app.
39. Testing
41. Deployment
42. Our final step will be to add the process of deployment to a Next.js app.
43. Ideally each commit or push or PR should generate for you a preview link and run a set of predefined action to make sure that you didn’t push some breaking code
45. Summary
46. Q & A As everything good in life, knowledge is great only when shared https://discord.gg/94uhCAkFKf
47. As everything good in life, knowledge is great only when shared hypetech.io/education
48. contact@reactweek.dev