This is a Next.js project bootstrapped with create-next-app.
This is a Next.js template designed to provide a starting point for building web applications using the Next.js framework. Next.js is a React framework that enables server-side rendering and provides an intuitive development experience.
Server-side rendering (SSR): Next.js allows you to render React components on the server, providing improved performance and SEO capabilities.
Static site generation (SSG): You can generate static HTML pages for improved performance and easy deployment to content delivery networks (CDNs).
TypeScript support: The template is preconfigured with TypeScript, enabling static type-checking and improved code integrity.
Routing: Next.js provides a powerful routing system that allows you to define dynamic routes and handle navigation between pages easily.
Tailwind CSS: Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
TanStack Query: data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. One of the best libraries for fetching, caching, synchronizing, and updating asynchronous data in your React app
Hot Module Replacement (HMR): During development, Next.js supports HMR, which allows you to see changes in real-time without refreshing the entire page.
API routes: Next.js allows you to define serverless API endpoints directly within your application, making it easy to create backend functionality.
Code splitting: Next.js automatically splits your code into smaller chunks, improving initial page load times and optimizing resource usage.
The template follows a typical Next.js project structure:
public- Store static files (images, fonts, etc.) in this directory.src- Main source code.src/pages- This folder contains your application's pages. Each file represents a route in your application.src/pages/api- Define your serverless API routes in this folder.src/modules- Serves as a home for reusable and modular code components.src/components- Place reusable React components in this folder.src/styles- Contains global styles.src/services- API calls (e.gproducts,todos,etc.).src/utils- Helper functions/utilities (e.g.constants,types).src/hooks- Custom hooks files (e.guse-local-storage.tsx).src/context- Context.
Feel free to modify the folder structure to fit the needs of your project.
- Github URL: https://github.com/ErysCode7/nextjs-template
- Live Site URL: https://nextjs-template-eryscode7.vercel.app
-
Clone the repo
git clone git@github.com:ErysCode7/nextjs-template.git
-
Install NPM packages
npm install
-
Run app
npm run dev
-
Navigate to
http://localhost:3000
- Next.js - JavaScript Framework.
- TypeScript - a syntactic superset of JavaScript which adds static typing.
- TailwindCSS - CSS Framework.
- TanStack Query - data-fetching library for web applications.
- NextAuth - open-source authentication solution for Next.js applications.
- Facebook - Erys Mozo
- Instagram - thebleakmidwinter__
- Frontend Mentor - ErysCode7
- LinkedIn - Erys Mozo
Next.js applications can be easily deployed to various hosting platforms or CDNs. Refer to the Next.js documentation for detailed deployment instructions based on your chosen deployment platform.
If you encounter any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request. Contributions are welcome!