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

feat: Add NextJS app router support #3074

Merged
merged 1 commit into from
Jun 6, 2024
Merged

feat: Add NextJS app router support #3074

merged 1 commit into from
Jun 6, 2024

Conversation

ntucker
Copy link
Collaborator

@ntucker ntucker commented Jun 6, 2024 •
edited
Loading

Fixes #2822

Motivation

Support NextJS App Router. This is a much better developer experience, and also allows for SSR based on dynamic routing, which means NextJS is finally usable for SSR use cases and not just SSG.

Solution

Add DataProvider export to /nextjs namespace.

This provides 'App Router' compatibility. Simply add it to the root layout, ensuring
children is rendered as a descendent.

app/layout.tsx 
import { DataProvider } from '@data-client/react/nextjs';
import { AsyncBoundary } from '@data-client/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <DataProvider>
          <header>Title</header>
          <AsyncBoundary>{children}</AsyncBoundary>
          <footer></footer>
        </DataProvider>
      </body>
    </html>
  );
}

Any endpoints can be used in server components by simply awaiting them

export default async function StaticPage() {
  const todos = await TodoResource.getList();
  return <TodoList todos={todos} />;
}

Or used in client components - meaning their state can be mutated client-side with useSuspense()

import { useSuspense } from '@data-client/react';

export default function InteractivePage() {
  const todos = useSuspense(TodoResource.getList);
  return <TodoList todos={todos} />;
}

Additionally

  • Various 'use client' directives have been added to ensure compatibility across packages.

Next steps

  • Move everything to @data-client/react package so additional packages are no longer needed.
  • Rename CacheProvider to DataProvider

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jun 6, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 4f3208c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
@data-client/ssr Patch
@data-client/use-enhanced-reducer Patch
@data-client/react Patch
@data-client/redux Patch
rdc-website Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codecov Codecov
Copy link

codecov bot commented Jun 6, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.72%. Comparing base (e9048b8) to head (4f3208c).

Additional details and impacted files 
@@            Coverage Diff             @@
##           master    #3074      +/-   ##
==========================================
+ Coverage   98.49%   98.72%   +0.22%     
==========================================
  Files         122      123       +1     
  Lines        2199     2199              
  Branches      451      451              
==========================================
+ Hits         2166     2171       +5     
+ Misses         21       17       -4     
+ Partials       12       11       -1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@ntucker ntucker force-pushed the nextjs-app-router branch 5 times, most recently from 899e4c2 to 2d645df Compare June 6, 2024 15:25
@ntucker ntucker merged commit 1f1f66a into master Jun 6, 2024
24 checks passed
@ntucker ntucker deleted the nextjs-app-router branch June 6, 2024 15:50
@github-actions github-actions bot mentioned this pull request Jun 6, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Support Next.js app router
1 participant
@ntucker