Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Marko Arsić

November 30, 2022
Tweet

More Decks by Marko Arsić

Other Decks in Programming

Transcript

  1. 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
  2. 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.
  3. 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.
  4. Scalability is NOT only applied on software or hardware system

    but also on a man power (team) working on it.
  5. “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.”
  6. Includes first class support for Typescript and React, while offering

    easy solutions for some of the most common requirements in a modern application development
  7. o1 Relatively easy to learn. o2 Built-in CSS support. o3

    Automatic TypeScript support. o4 Multiple data fetching technique. o5 File-system routing.
  8. Next.js has quickly become one of the most in demand

    skills in the web development space.
  9. 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.
  10. Creating a Next.js can be done in a few ways,

    but the two are most common o1 With create-next-app o2 Manually.
  11. Set a standard that will be used by all contributors

    to the project to keep the code style consistent and basic best practices followed
  12. 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
  13. Set a standard that will be used by all contributors

    to the project to keep the code style consistent and basic best practices followed
  14. Most of quality tools are only needed during development, so

    we add it as a devDependency with -D flag
  15. Most of quality tools are only needed during development, so

    we add it as a devDependency with -D flag
  16. 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).
  17. 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)
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. Our final step will be to add the process of

    deployment to a Next.js app.
  23. 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
  24. Q & A As everything good in life, knowledge is

    great only when shared https://discord.gg/94uhCAkFKf