Codewalnut leads an open-source project offering a high-quality Next.js boilerplate. It's accessible for developers to use and customize as per their needs.
-
TypeScript - a superset of JavaScript that adds static typing. This allows for more robust code and better developer experience.
-
React - a JavaScript library for building user interfaces. It provides a number of features that make it a great choice for building a web app.
-
Next.js - for server-side rendering and static site generation. It also has a growing ecosystem of plugins and features that make it a great choice for building a React app.
-
Tailwind CSS - for styling. Tailwind is a utility-first CSS framework that provides a number of base styles and utility classes that can be used to build custom styles. It also provides a number of plugins that can be used to extend the base styles.
-
Sass - for advanced styling. Sass is a CSS preprocessor that allows for more advanced styling, including keyframe animations and targeting specific elements.
-
React Testing Library - for testing. React Testing Library is a testing library that allows for testing React components in a way that closely resembles how the components are used.
-
Jest - for running tests. Jest is a JavaScript testing framework that allows for running tests.
-
ESLint - for linting. ESLint is a linter that checks for common errors and code smells in JavaScript code.
-
Prettier - for formatting. Prettier is a code formatter that automatically formats JavaScript code.
-
clsx - for dynamic classnames. clsx is a tiny utility package that allows for dynamic classnames.
-
date-fns - for date formatting. date-fns is a date formatting library that allows for formatting dates in a variety of ways.
First, install the app dependencies:
npm install
Then, you can run the development server with the command:
npm run dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
You can run the tests with the command:
npm run test
You can also run the tests in watch mode with the command:
npm run test:watch
- public
-- img
The public folder contains img that are used by the app. These img are copied to the dist folder when the app is built.
We want to keep as many assets as possible in the public folder, so that they can be cached by the browser. This will improve the performance of the app.
- src
-- components
--- atoms
--- molecules
--- organisms
-- constants
-- pages
-- styles
-- utils
The src folder contains the source code for the app. We want to keep all of the source code in the src folder, so that it is easy to find and organize.
The components folder contains the components that make up the UI of our app. Components are separated into Atoms, Molecules, and Organisms according to the Atomic Design methodology. The atoms folder contains the smallest components that are used by the app. The molecules folder contains components that are made up of atoms. The organisms folder contains components that are made up of molecules.
The constants folder contains constants that are used by the app. This includes constants for the app's theme, colors, and API endpoints.
The pages folder contains the pages that make up the app. Each page is a React component that is rendered by Next.js. Pages are automatically routed by Next.js based on the file name and folder structure.
The styles folder contains a global styles file that is used by the app. The global styles file contains styles that are used by the entire app. It also imports the Tailwind CSS styles.
The utils folder contains common utility functions for reusable logic that we want to share between components.
I've also included an example Button component that showcase the file structure and naming conventions that we want to use.
- Button
-- Button.tsx
-- Button.test.tsx
We can also add a __mocks__ folder to mock dependencies for testing if needed.
Component files and folders should be named using PascalCase. This is the common naming convention that is used for React components.
Helper functions and their folders should be named using camelCase.
- utils
-- formatDate
--- formatDate.ts
--- formatDate.test.ts
Every component should have a corresponding test file. This allows us to test the component in isolation and ensure that it works as expected.