Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add support for nextjs based app #7266

Merged
merged 3 commits into from
Jun 27, 2024
Merged

Add support for nextjs based app #7266

merged 3 commits into from
Jun 27, 2024

Conversation

aarushik93
Copy link
Contributor

@aarushik93 aarushik93 commented Jun 26, 2024 •
edited by codiumai-pr-agent-pro bot
Loading

User description

Background

As we are building out the frontend of AutoGPT - we are moving to NextJS.

This PR adds the structure and base for NextJS development

Changes 🏗️

Created a nextjs based app in rnd/autogpt_builder

PR Quality Scorecard ✨

  • Have you used the PR description template?   +2 pts
  • Is your pull request atomic, focusing on a single change?   +5 pts
  • Have you linked the GitHub issue(s) that this PR addresses?   +5 pts
  • Have you documented your changes clearly and comprehensively?   +5 pts
  • Have you changed or added a feature?   -4 pts
    • Have you added/updated corresponding documentation?   +4 pts
    • Have you added/updated corresponding integration tests?   +5 pts
  • Have you changed the behavior of AutoGPT?   -5 pts
    • Have you also run agbenchmark to verify that these changes do not regress performance?   +10 pts

PR Type

Enhancement, Documentation

Description

  • Added root layout component with metadata and global styles.
  • Created Home component with initial layout and links to documentation, runner, and deploy sections.
  • Configured TailwindCSS with custom content paths and theme extensions.
  • Added global CSS styles using TailwindCSS.
  • Added ESLint configuration extending Next.js core web vitals.
  • Added README with project description and setup instructions.
  • Added basic Next.js configuration file.
  • Added PostCSS configuration with TailwindCSS plugin.
  • Added TypeScript configuration with Next.js plugin and custom paths.

Changes walkthrough 📝

Relevant files
Enhancement
3 files
layout.tsx
Add root layout component with metadata and styles             

rnd/autogpt_builder/src/app/layout.tsx

  • Added root layout component with metadata and global styles.
  • Configured HTML structure and body class.
    		•  +22/-0   
    page.tsx
    Create Home component with initial layout and links           

    rnd/autogpt_builder/src/app/page.tsx

  • Created Home component with initial layout and styling.
  • Included links to documentation, runner, and deploy sections.
    		•  +97/-0   
    globals.css
    Add global CSS styles with TailwindCSS                                     

    rnd/autogpt_builder/src/app/globals.css

  • Added global CSS styles using TailwindCSS.
  • Defined color schemes and utility classes.
    		•  +33/-0   
    Configuration changes
    5 files
    tailwind.config.ts
    Configure TailwindCSS with custom paths and theme               

    rnd/autogpt_builder/tailwind.config.ts

  • Configured TailwindCSS with custom content paths and theme extensions.

    		•  +20/-0   
    .eslintrc.json
    Add ESLint configuration for Next.js                                         

    rnd/autogpt_builder/.eslintrc.json

    • Added ESLint configuration extending Next.js core web vitals.
    		 +3/-0     
    next.config.mjs
    Add basic Next.js configuration file                                         

    rnd/autogpt_builder/next.config.mjs

    • Added basic Next.js configuration file.
    		 +4/-0     
    postcss.config.mjs
    Add PostCSS configuration with TailwindCSS plugin               

    rnd/autogpt_builder/postcss.config.mjs

    • Added PostCSS configuration with TailwindCSS plugin.
    		 +8/-0     
    tsconfig.json
    Add TypeScript configuration with Next.js plugin                 

    rnd/autogpt_builder/tsconfig.json

  • Added TypeScript configuration with Next.js plugin and custom paths.
    		•  +26/-0   
    Documentation
    1 files
    README.md
    Add README with project description and setup instructions

    rnd/autogpt_builder/README.md

  • Added README with project description and getting started
    instructions.
  • Included deployment section (TODO).
    		•  +25/-0   

    💡 PR-Agent usage:
    Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

    @codiumai-pr-agent-pro codiumai-pr-agent-pro bot added documentation Improvements or additions to documentation enhancement New feature or request labels Jun 26, 2024
    @codiumai-pr-agent-pro CodiumAI PR-Agent Pro
    Copy link

    PR Description updated to latest commit (e6067de)

    @netlify Netlify
    Copy link

    netlify bot commented Jun 26, 2024 •
    edited
    Loading

    ✅ Deploy Preview for auto-gpt-docs canceled.

    Name Link
    🔨 Latest commit ae8f0a9
    🔍 Latest deploy log https://app.netlify.com/sites/auto-gpt-docs/deploys/667d27ee84ea9b0008fd5522

    @codiumai-pr-agent-pro CodiumAI PR-Agent Pro
    Copy link

    PR Reviewer Guide 🔍

    ⏱️ Estimated effort to review [1-5] 3
    🧪 Relevant tests No
    🔒 Security concerns No
    ⚡ Key issues to review Possible Bug:
    The href attribute in the tags within page.tsx is empty for the "Runner" and "Deploy" links. This could lead to unexpected behavior or errors when users try to use these links.
    Code Quality:
    The use of z-index with negative values and complex CSS pseudo-elements in page.tsx might make the layout hard to manage and maintain. Consider simplifying the CSS for better maintainability.
    Accessibility Concern:
    The use of and tags directly in the React component RootLayout is unconventional and might lead to issues with document structure and SEO. Typically, these tags are managed by the document template in Next.js, not within components.

    @codiumai-pr-agent-pro CodiumAI PR-Agent Pro
    Copy link

    PR Code Suggestions ✨

    CategorySuggestion                                                                                                                                    Score
    Accessibility
    Add missing alt attribute to Image component for accessibility

    Add alt text to the component for accessibility and to prevent React warnings about
    missing alt attributes.

    rnd/autogpt_builder/src/app/page.tsx [19-24]

     <Image
   src="/autogpt.svg"
+  alt="AutoGPT Logo"
   className="dark:invert"
   width={100}
   height={24}
   priority
 />
    • Apply this suggestion
    Suggestion importance[1-10]: 10

    Why: Adding an alt attribute is essential for accessibility and prevents React warnings, making this a highly valuable improvement.

    		10
    Best practice
    Use Next.js specific HTML component for better server-side rendering

    Replace the tag with the component from next/document to ensure correct server-side
    rendering and HTML document structure in Next.js.

    rnd/autogpt_builder/src/app/layout.tsx [18-20]

    -<html lang="en">
+import { Html, Head, Main, NextScript } from 'next/document';
+<Html lang="en">
   <body className={inter.className}>{children}</body>
-</html>
+</Html>
    • Apply this suggestion
    Suggestion importance[1-10]: 9

    Why: This suggestion improves server-side rendering and ensures the correct HTML document structure in Next.js, which is crucial for performance and SEO.

    		9
    Possible issue
    Add valid URLs to anchor tags to ensure they are functional

    Ensure the anchor tags have valid href attributes to prevent runtime errors and improve
    usability.

    rnd/autogpt_builder/src/app/page.tsx [62-65]

     <a
-  href=""
+  href="https://example.com"
   className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
   target="_blank"
   rel="noopener noreferrer"
 >
    • Apply this suggestion
    Suggestion importance[1-10]: 8

    Why: Ensuring anchor tags have valid href attributes prevents runtime errors and improves usability, which is important for a functional application.

    		8

    @github-actions github-actions bot removed the documentation Improvements or additions to documentation label Jun 26, 2024
    @aarushik93 aarushik93 changed the title Getting started with nextjs Add support for nextjs based app Jun 27, 2024
    @aarushik93 aarushik93 merged commit dd960f9 into master Jun 27, 2024
    10 checks passed
    @aarushik93 aarushik93 deleted the rushi/nextjs-setup branch June 27, 2024 09:02
    @aarushik93 aarushik93 linked an issue Jul 4, 2024 that may be closed by this pull request
    Update app to be nextjs compliant #7312
    Open
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Reviewers

    @Bentlybro Bentlybro Bentlybro approved these changes

    Assignees
    No one assigned
    Labels
    enhancement New feature or request Review effort [1-5]: 3 size/l
    Projects
    AutoGPT development kanban
    Status: ✅ Done
    Milestone
    No milestone
    Development

    Successfully merging this pull request may close these issues.

    Update app to be nextjs compliant
    2 participants
    @aarushik93 @Bentlybro