feat: migrate from Vite and React Routre to the Next.js#1260
Open
nekofar wants to merge 478 commits intonounsDAO:masterfrom
Open
feat: migrate from Vite and React Routre to the Next.js#1260nekofar wants to merge 478 commits intonounsDAO:masterfrom
nekofar wants to merge 478 commits intonounsDAO:masterfrom
Conversation
|
@nekofar is attempting to deploy a commit to the Nouns Team on Vercel. A member of the Team first needs to authorize it. |
nekofar
force-pushed
the
feature/migrate-from-vite-to-next
branch
2 times, most recently
from
32a41f8 to
0701920
Compare
Member
|
@nekofar fyi I'll be migrating nouns.wtf from netlify to vercel soon™, so mind that during your testing |
Contributor
Author
Yeah, noticed that too. Turns out Netlify and Vercel get along just fine, so no extra adapter hassle and the same code ships on both without a fuss. |
nekofar
force-pushed
the
feature/migrate-from-vite-to-next
branch
from
b5b925a to
819f64f
Compare
Align props for better readability and maintainability. Improves code consistency and visual clarity.
Standardize and update import paths to ensure consistent casing. Improves readability and helps prevent potential issues across environments.
Ensure localized strings are displayed correctly for users. Improves user experience in `zh-CN` and `ja-JP` locales.
Add new dependencies to `onlyBuiltDependencies` for build optimization. Improves build performance and ensures required dependencies are prioritized.
Move `onlyBuiltDependencies` and `overrides` from package.json to pnpm-workspace.yaml. Simplifies dependency management and improves configuration clarity.
Replace `VITE_` prefixes with `NEXT_PUBLIC_` for consistency. Ensures alignment with Next.js conventions and improves maintainability.
Enable client-side rendering explicitly for `nav-bar`. Ensures compatibility with React Server Components and improves rendering clarity.
Simplify component structure for improved clarity and maintainability. Enhances overall readability and prepares for potential future updates.
Update import paths to use consistent kebab-case formatting. Improves readability, prevents potential case-sensitivity issues, and ensures uniformity across the codebase.
Ensure consistent casing across import paths for uniformity and to prevent potential case-sensitivity issues.
Ensure consistent casing for import paths across utils. Improves readability and prevents case-sensitivity issues in different environments.
Improve import order across components for better readability and maintainability. This aligns with established project conventions and ensures a clean structure.
Improve code robustness by adding explicit null checks and better error handling. Ensures stability across utilities, state slices, and wrappers while enhancing readability and maintainability.
Increase robustness by using `isNullish` for null checks. Improves code readability and ensures better handling of undefined or null values in auction data.
Consolidate `.npmrc` config into `pnpm-workspace.yaml` for better config management. Simplifies project setup and aligns with pnpm conventions.
Ensure compatibility and resolve potential bugs by upgrading dev dependencies. Keeps the codebase up-to-date and aligns with latest improvements.
Standardize formatting and improve dependency management in `pnpm-workspace.yaml`. Enhances readability and aligns with project conventions.
Align versions with other dependencies to ensure compatibility. Resolves potential issues caused by version mismatch in `pnpm-workspace.yaml`.
Align with the latest stable release and improve compatibility. This ensures the project benefits from new features and resolved issues in the updated version.
Ensure `imgPath` is trimmed to avoid unexpected whitespace issues. Improves reliability in resolving the correct image source.
This change simplifies styling by inlining former CSS module styles and replacing them with Tailwind classes for improved maintainability and consistency.
Replaced CSS module styles with Tailwind utilities for cleaner and more consistent styling. This removes unnecessary legacy CSS files and simplifies style management.
Improved readability and consistency across components and hooks. Removed redundant props, updated typings, and refined state management for better maintainability.
simplified imports by removing unnecessary `index` files, improving code organization and maintainability. This aligns with the goal of a cleaner and more streamlined structure.
streamlined imports by reorganizing component folders. This improves maintainability and reduces nested paths for cleaner code structure.
streamlined imports and relocated assets for cleaner structure and improved maintainability.
updated import paths to use absolute paths, improving readability and maintainability by standardizing the import structure.
Deleted legacy CSS module files after migrating styles to Tailwind. This simplifies the codebase and reduces unused assets.
moved and streamlined component for improved structure and clarity. This promotes better organization and reduces complexity in file paths.
standardized conditions by replacing `Boolean` with `isTruthy` for improved readability and consistency.
standardized and updated relative imports to absolute paths for improved readability and maintainability. Replaced `Boolean` with `isTruthy` where applicable for consistency.
streamlined test coverage by removing an unnecessary test case. This improves maintainability and reduces redundant assertions.
streamlined the test suite by eliminating a redundant test case. This improves maintainability and aligns with recent updates to the component behavior.
replaced inline prop definition with `SectionProps`. This improves readability, enforces consistency, and aligns with TypeScript practices.
added test coverage for `Link`, `ModalSubTitle`, `ModalTextPrimary`, `ModalTitle`, `Section`, `ModalLabel`, and `NavBarItem`. This ensures component behavior is verified and improves reliability.
migrated remaining components and utilities to Next.js routing. This removes legacy dependencies and ensures consistency with Next.js routing conventions.
aligned paths with pluralized structure for consistency. Updated references and routing to match new convention and added redirection for backward compatibility.
moved `NavBar`, `Footer`, and `Toaster` to `layout.tsx` for better organization. Simplified `Providers` structure to improve readability and maintainability.
reduced noise in eslint outputs by suppressing warnings. This ensures clearer focus on errors and improves log readability.
enabled client-side rendering for the `footer` component. This ensures compatibility with client-dependent features and improves clarity in rendering behavior.
moved `Toaster` from `layout.tsx` to `Providers` for better separation of concerns. This enhances maintainability and ensures consistent placement within the app hierarchy.
refined `NavBar` styling with improved alignment and spacing. Enhances visual consistency and user experience.
aligned utility checks and routing logic with pluralized paths. This ensures consistent path structure and adherence to naming conventions.
introduced `useShouldUseStateBg` hook for clarity and reuse. This simplifies logic, improves readability, and reduces redundancy in state checks.
replaced custom utility classes with reusable variants. Improves maintainability, reduces redundancy, and enhances consistency in styles.
standardized color styles by replacing inline values with brand tokens. Enhances maintainability, consistency, and alignment with design system.
simplified className handling by using the `cn` utility. This reduces redundancy, improves readability, and ensures consistent class composition.
Replace ad-hoc responsive variants with Tailwind-style max-<screen> based on configured screens.\n\n- Auto-generate max-<screen> for xs, sm, md, md-lg, lg, xl, 2xl.\n- Retain existing custom min-1400 container variant.\n- Keep tokens and utilities (brand colors, shadows, bg images, radii).\n- Prepares codebase to replace arbitrary pixel breakpoints with named variants.
Unify responsive naming to Tailwind defaults and standardize class composition.\n\n- Replace legacy lg-max/xl-max with max-lg/max-xl.\n- Map arbitrary pixel breakpoints (e.g., 1040/660/568/414) to nearest screens.\n- Switch remaining template/variable className usage to cn() and group utilities.\n- Preserve visuals, dark mode, and aria/data variants.\n- Align codebase to the generated max-<screen> variants and md-lg screen.
improved flex and spacing consistency by refining class usage. Enhances readability, aligns with responsive patterns, and ensures design coherence.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
We ditched Vite and
react-routerand moved the whole web app over to Next.js App Router. Now it actually plays nice with SSR/SSG, has proper file-system routing, and doesn’t fall apart when you open a modal. Netlify config’s updated too; publishes from.nextwith the Next.js plugin.What changed
next.config.ts, Next scripts, polyfills, SVGR loader, Lingui SWC, the works.react-router; everything’snext/link+next/navigation. Added redirects so old paths don’t break (/auction/:id → /noun/:id).VITE_*vars are dead; long liveNEXT_PUBLIC_*. Update your.envor nothing works.Breaking stuff
NEXT_PUBLIC_*prefix. Old ones won’t load.react-router. Update downstream code/tests.How to test
pnpm install→pnpm --filter @nouns/webapp dev(ordev:sepolia)..envuses theNEXT_PUBLIC_*vars.Deployment
.next+@netlify/plugin-nextjswith updated vars.pnpm --filter @nouns/webapp build && pnpm --filter @nouns/webapp start.