This is a Next.js project integrated with Sanity CMS for managing content and Auth.js for authentication. The project includes features like dynamic routing, live content updates, and user comments.
- Next.js for server-side rendering and static site generation.
- Sanity CMS for content management.
- Auth.js for user authentication (Google Sign-In).
- Dynamic routing for posts and categories.
- Commenting system with moderation.
- Responsive design using Tailwind CSS.
- Authentication: Users can log in using Google Sign-In via Auth.js.
- Content Management: Content is managed using Sanity CMS, allowing dynamic updates without redeploying the app.
- Dynamic Routing: Posts and categories are dynamically routed for better scalability.
- Commenting System: Users can add comments to posts, which are stored and displayed dynamically.
Step 1: Clone the Repository
git clone <repository-url>Go to directory and open with vscode or others editor.
cd blog-appStep 2: Install Dependencies
npm installStep 3: Set Up Environment Variables
- Create a
.envfile in the root directory. - Add the required environment variables:
NEXT_PUBLIC_SANITY_PROJECT_ID="xxxxx"
NEXT_PUBLIC_SANITY_DATASET="xxxxx"
AUTH_SECRET="xxxx"
AUTH_GOOGLE_ID=xxxxx
AUTH_GOOGLE_SECRET=xxxxxx
SANITY_API_TOKEN=xxxxx
Step 4: Run the Development Server
npm run devThe app will be available at http://localhost:3000.
Core Dependencies
- Next.js: Framework for server-side rendering and static site generation.
- React: Library for building user interfaces.
Authentication
- Auth.js: For user authentication with Google Sign-In.
Content Management
- Sanity CMS: For managing and fetching content dynamically.
- @sanity/image-url: For handling Sanity image URLs.
UI and Styling
- @headlessui/react: Accessible UI components.
- @heroicons/react: Icon library.
- lucide-react: Icon library.
- clsx: Utility for conditional classNames.
- dayjs: Date manipulation library.
- react-icons: Icon library.
Forms and Validation
- react-hook-form: For form handling and validation.
npm run dev: Starts the development server.npm run build: Builds the project for production.npm run start: Starts the production server.npm run typegen: Generates TypeScript types for Sanity schemas.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.