{"id":40015359,"url":"https://github.com/mongodb-developer/nextjs-news-template-mongodb","last_synced_at":"2026-01-19T03:03:44.842Z","repository":{"id":315057830,"uuid":"1057293973","full_name":"mongodb-developer/nextjs-news-template-mongodb","owner":"mongodb-developer","description":null,"archived":false,"fork":false,"pushed_at":"2025-12-05T17:07:57.000Z","size":542,"stargazers_count":11,"open_issues_count":1,"forks_count":9,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-09T04:37:34.352Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nextjs-news-template-mongodb.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mongodb-developer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-15T14:31:04.000Z","updated_at":"2025-12-05T17:08:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"49f46962-affc-43b3-a648-8601d36548ea","html_url":"https://github.com/mongodb-developer/nextjs-news-template-mongodb","commit_stats":null,"previous_names":["mongodb-developer/nextjs-news-template-mongodb"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mongodb-developer/nextjs-news-template-mongodb","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongodb-developer%2Fnextjs-news-template-mongodb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongodb-developer%2Fnextjs-news-template-mongodb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongodb-developer%2Fnextjs-news-template-mongodb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongodb-developer%2Fnextjs-news-template-mongodb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mongodb-developer","download_url":"https://codeload.github.com/mongodb-developer/nextjs-news-template-mongodb/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongodb-developer%2Fnextjs-news-template-mongodb/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28559366,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T00:46:33.223Z","status":"online","status_checked_at":"2026-01-19T02:00:08.049Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-19T03:03:44.705Z","updated_at":"2026-01-19T03:03:44.827Z","avatar_url":"https://github.com/mongodb-developer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Next.js with MongoDB and Better Auth](./public/og.png)\n\n-\u003e View demo: [mongodb-news-template-nextjs.vercel.app](https://mongodb-news-template-nextjs.vercel.app/)\n\n# Next.js with MongoDB and Better Auth\n\nA modern full-stack template for building React applications using Next.js, MongoDB, and Better Auth for authentication. Features a Hacker News-style post submission and voting system with optimistic updates, server actions, and email/password authentication.\n\n## Features\n\n- **🔐 Authentication**: Email/password authentication with Better Auth\n- **📝 Post System**: Hacker News-style post submission and voting\n- **⚡ Optimistic Updates**: Real-time UI updates with React's useOptimistic\n- **🎨 Modern UI**: Built with shadcn/ui and Tailwind CSS\n- **📱 Responsive Design**: Mobile-first design with dark mode support\n- **🗄️ MongoDB Integration**: Native MongoDB driver with optimized queries\n- **🔄 Server Actions**: Form handling without client-side API calls\n- **📊 Real-time Status**: Database connection monitoring\n- **🚀 Production Ready**: TypeScript, ESLint, and Vercel deployment optimized\n\n## Getting Started\n\nClick the \"Deploy\" button to clone this repo, create a new Vercel project, setup the MongoDB integration, and provision a new MongoDB database:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmongodb-developer%2Fnextjs-news-template-mongodb\u0026project-name=mongodb-news-nextjs\u0026repository-name=mongodb-news-nextjs\u0026demo-title=MongoDB%20%26%20Next.js%20Auth%20Starter%20Template\u0026demo-description=A%20minimal%20template%20for%20building%20full-stack%20React%20applications%20using%20Next.js%2C%20Vercel%2C%2C%20Better%20Auth%20and%20MongoDB.\u0026demo-url=https%3A%2F%2Fnews.mongodb.com\u0026demo-image=https%3A%2F%2Fnews.mongodb.com%2Fog.png\u0026products=%5B%7B%22type%22%3A%22integration%22%2C%22integrationSlug%22%3A%22mongodbatlas%22%2C%22productSlug%22%3A%22atlas%22%2C%22protocol%22%3A%22storage%22%7D%5D\u0026env=BETTER_AUTH_SECRET\u0026envDescription=Generate%20a%20random%20secret%20by%20clicking%20here%20%E2%86%92%20\u0026envLink=https%3A%2F%2Fgenerate-secret.vercel.app%2F32) \n\n## Local Setup\n\n### Installation\n\nInstall the dependencies:\n\n```bash\nnpm install\n```\n\n### Development\n\n#### Create a .env file in the project root\n\n```bash\ncp .env.example .env\n```\n\n#### Configure environment variables\n\nUpdate the `.env` file with your configuration:\n\n```txt\n# MongoDB connection string from Atlas Dashboard\nMONGODB_URI=mongodb+srv://\u003cusername\u003e:\u003cpassword\u003e@\u003ccluster-url\u003e/\u003cdatabase\u003e?retryWrites=true\u0026w=majority\nMONGODB_DB=better-auth\n\n# Better Auth configuration\nBETTER_AUTH_URL=http://localhost:3000\nBETTER_AUTH_SECRET=your-secure-secret-key-here-minimum-32-characters\n\n```\n\n#### Setup database indexes (optional for production)\n\n```bash\nnpm run setup-indexes\n```\n\n#### Start the development server\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Tech Stack\n\n- **Framework**: [Next.js 15](https://nextjs.org) with App Router\n- **Database**: [MongoDB](https://www.mongodb.com?utm_campaign=devrel\u0026utm_source=third-party-content\u0026utm_medium=cta\u0026utm_content=template-nextjs-news-mongodb\u0026utm_term=jesse.hall) with native Node.js driver\n- **Authentication**: [Better Auth](https://better-auth.com) with email/password\n- **Styling**: [Tailwind CSS](https://tailwindcss.com) with [shadcn/ui](https://ui.shadcn.com)\n- **Forms**: [React Hook Form](https://react-hook-form.com) with [Zod](https://zod.dev) validation\n- **Icons**: [Lucide React](https://lucide.dev)\n- **Notifications**: [Sonner](https://sonner.emilkowal.ski)\n- **Deployment**: [Vercel](https://vercel.com)\n\n## Project Structure\n\n```\n├── app/                    # Next.js App Router\n│   ├── api/auth/          # Better Auth API routes\n│   ├── login/             # Login page\n│   ├── signup/            # Signup page\n│   └── page.tsx           # Home page\n├── components/            # React components\n│   ├── ui/               # shadcn/ui components\n│   ├── PostItem.tsx      # Individual post with voting\n│   ├── PostListServer.tsx # Server-side post list\n│   ├── PostSection.tsx   # Post section wrapper\n│   └── ...               # Other components\n├── lib/                  # Core utilities\n│   ├── auth.ts          # Better Auth configuration\n│   ├── auth-client.ts   # Client-side auth methods\n│   ├── mongodb.ts       # Database connection\n│   ├── posts.ts         # Post data functions\n│   ├── actions.ts       # Server actions\n│   └── schemas.ts       # Zod validation schemas\n└── scripts/             # Utility scripts\n    └── setup-indexes.mjs # Database index setup\n```\n\n## Key Features Explained\n\n### Authentication System\n- **Email/Password**: Secure login with email and password\n- **Form Validation**: Password requirements and email validation\n- **Session Management**: Secure session handling with MongoDB storage\n- **User Profiles**: User account management with Better Auth\n\n### Post Management\n- **Real-time Voting**: Optimistic UI updates using React's `useOptimistic`\n- **Server Actions**: Form submissions without client-side API calls\n- **Caching**: Strategic caching with Next.js `unstable_cache` and revalidation\n- **Pagination**: URL-based pagination with smooth navigation\n\n### Modern React Patterns\n- **Server Components**: SEO-friendly server-side rendering\n- **Client Components**: Interactive elements with proper hydration boundaries\n- **Suspense**: Loading states for better user experience\n- **Form Validation**: Type-safe forms with React Hook Form and Zod\n\n## Learn More\n\nTo learn more about the technologies used in this template:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API\n- [Better Auth Documentation](https://better-auth.com/docs) - authentication and session management\n- [MongoDB Documentation](https://www.mongodb.com/docs/?utm_campaign=devrel\u0026utm_source=third-party-content\u0026utm_medium=cta\u0026utm_content=template-nextjs-news-mongodb\u0026utm_term=jesse.hall) - database features and APIs\n- [shadcn/ui Documentation](https://ui.shadcn.com) - component library and design system\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs) - utility-first CSS framework\n\n## Deploy on Vercel\n\nCommit and push your code changes to your GitHub repository to automatically trigger a new deployment.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmongodb-developer%2Fnextjs-news-template-mongodb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmongodb-developer%2Fnextjs-news-template-mongodb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmongodb-developer%2Fnextjs-news-template-mongodb/lists"}