Next.js

What's new in v3

The new features in BProgress v3

New features

ProgressProvider

The component ProgressBar has been replaced by ProgressProvider. This provider contains the ProgressBar component and some methods with the useProgress hook to control the progress bar.

<ProgressProvider 
  height="4px"
  color="#fffd00"
  options={{ showSpinner: false }}
  shallowRouting
>
  {children}
</ProgressProvider>

More information here

useProgress

The useProgress hook is used to manipulate the progress state.

const { start, stop, inc, set, pause, resume, setOptions, getOptions } = useProgress();

More information here

Progress components

You can now add one or more progress bars anywhere in your code.

<Progress />
// or
<Progress>
  <Bar>
    <Peg />
  </Bar>
  <Spinner>
    <SpinnerIcon />
  </Spinner>
</Progress>

Warning

The Progress component must be used inside the ProgressProvider with the option template set to null.

<ProgressProvider options={{
  template: null,
}}>
  <Progress />
</ProgressProvider>

This, combined with the disableStyle property, allows you to make your progress using TailwindCSS only.

More information here

useRouter (only for App directory)

A new basePath option has been added to the router. This option is only useful if you use a basePath in your next.config.(js|mjs|ts) file.

const router = useRouter(undefined, { basePath: '/docs' });

You can also pass the options directly on the useRouter hook if you want to use the same options for all router actions.

const router = useRouter({ basePath: '/docs' });

Note

By default, if you do not specify any options when calling a router method, the options defined during the initialization of the useRouter hook will be applied. However, if you provide specific options in the method call (push, replace, back, refresh), these will take precedence and override the default options set in the hook.

More information here

Roadmap

The package is destined to evolve into the best progress bar solution.

We have defined a Roadmap to provide greater visibility on future developments. This will evolve over time.

See the Roadmap

Previous

Migration from next-nprogress-bar

Next

ProgressProvider

On this page