Welcome to the official Next JS Scaffold repository. This project is designed to kickstart your web app development with Next.js project bootstrapped with create-next-app, providing a robust framework that integrates the best practices and tools needed to build high-quality web applications efficiently.
This scaffold aims to reduce the initial setup time and complexity by providing a ready-to-use Next JS application structure. It leverages the power of Next JS, GraphQL, Clerk for authentication, and more, enabling developers to focus on building unique features right from the start.
 Next JS |
 Clerk |
 Shadcn |
 Apollo Client |
 GraphQL |
 GraphQL CodeGen |
- Next JS for the web app framework.
- Apollo Client for GraphQL integration.
- Clerk for secure authentication.
- Tailwind CSS for styling.
./src: The main directory of application./graphql-types: Provides GraphQL types for the applications./app/: Core functionality of the application./lib/: Library with functions and helpers./components/: Reusable components./hooks/: Custom React hooks.
tailwind.config.ts: Tailwind CSS configuration.
- Volta (ideally)
- Node.js (
18.17.0)
Clone the repository and install dependencies:
git clone git@github.com:maurim96/nextjs-clerk-shadcn-scaffold.git
cd nextjs-clerk-shadcn-scaffold
npm install-
Have the API up and running in propper endpoint + port (you can refer to the NestJs + GraphQl API Scaffold)
-
Run the command:
npm run gen:gql
To manage environment variables, consider using dotenv or a similar package. Create .env files for different environments (.env.development, .env.production, etc.). Remember to configure the necessary variables for API endpoints, feature flags, etc., without exposing sensitive information.
- TypeScript for static type checking
- ESLint for code linting
- Intuitive UI: Utilizing Tailwind CSS for responsive and aesthetic design.
- GraphQL Integration: Efficient data management.
- Custom Hooks: Enhance functionality and reusability.
You'll need .env. Ask someone on the team.
To develop all apps and packages, first install the dependencies by running:
npm install
Run dev version
npm run dev
Open http://localhost:3000 with your browser to see the result (check port in case you're using also the NestJs API Scaffold).
You can start editing the page by modifying src/app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Contributions are welcome! Please follow these steps to contribute:
- Fork the repository.
- Create a new branch for your feature or fix.
- Commit your changes with clear, descriptive messages.
- Push your changes and submit a pull request.
Please adhere to the coding standards and commit message guidelines provided in the repository.
Encounter an issue? Check out the FAQ or troubleshooting section in our documentation for common problems and solutions. If you still need help, please file an issue on GitHub with a detailed description of the problem.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
This project is UNLICENSED. Feel free to use it according to the terms of the license.