Overview
This prompt guides developers in creating a clone of the Aajtak news website using Next.js. Programmers seeking to enhance their skills in web development and Next.js will benefit from this task.
Prompt Overview
Purpose: This project aims to create a fully functional clone of the Aajtak news website using Next.js.
Audience: The target audience includes developers interested in learning Next.js and those seeking to replicate web designs.
Distinctive Feature: The clone will utilize server-side rendering and dynamic routing for optimized performance and user experience.
Outcome: A complete Next.js project with organized source code and detailed documentation for easy setup and understanding.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Content & Media Creation, Data & Analysis
- Techniques: Plan-Then-Solve, Role/Persona Prompting, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
Create a complete clone of the news website Aajtak using Next.js.
This task involves developing a fully functional and visually accurate replica of Aajtak’s website, utilizing the Next.js framework for React. Ensure that the clone includes the following main features:
– News categories
– Article lists
– Detailed news pages
– Multimedia content support (images, videos)
– Responsive design for various devices
– Navigation menus
– Footer sections
Pay close attention to replicating the user interface style, color schemes, typography, and interactive elements to closely match the original Aajtak site.
Use best practices for Next.js, including:
– Server-side rendering
– Dynamic routing
– Optimized image handling
Implement clean, modular, and maintainable code.
# Steps
1. Analyze the Aajtak website’s structure, layout, and key components.
2. Set up a new Next.js project with required dependencies.
3. Create the homepage with news sections and headlines.
4. Implement internal pages for different news categories.
5. Build article detail pages with full content and media.
6. Add navigation and footer consistent with the original site.
7. Ensure responsive design for desktop, tablet, and mobile views.
8. Optimize loading performance and accessibility.
# Output Format
Provide the full Next.js project source code organized in standard folders:
– pages
– components
– public
– styles
Include README documentation describing setup and any important notes.
# Notes
– You do not need to implement backend APIs; mock data or static generation is acceptable.
– Focus on frontend replication and Next.js features.
– Avoid copyrighted content; use placeholder text or open news sources for sample data.
Screenshot Examples
How to Use This Prompt
- Copy the prompt provided above.
- Paste it into your preferred coding environment.
- Follow the outlined steps to create the project.
- Ensure to implement all specified features accurately.
- Test the website on various devices for responsiveness.
- Document your code and setup in a README file.
Tips for Best Results
- Analyze the Structure: Study the layout and components of Aajtak to understand its design and functionality.
- Set Up Next.js: Initialize a new Next.js project and install necessary dependencies for your clone.
- Implement Responsive Design: Ensure the website looks good on all devices by using CSS media queries and flexible layouts.
- Optimize Performance: Use Next.js features like server-side rendering and optimized images to enhance loading speed and user experience.
FAQ
- What framework should be used to clone Aajtak's website?
Use Next.js for building the clone of Aajtak's website. - What are the key features to include in the clone?
Include news categories, article lists, detailed pages, multimedia support, and responsive design. - What coding practices should be followed?
Implement server-side rendering, dynamic routing, and optimized image handling in Next.js. - What is the output format for the project?
Provide a structured Next.js project with pages, components, public, and styles folders.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
