Instagram like stories with NextJS

burak94

Burak Tarım

Posted on January 9, 2024

Instagram like stories with NextJS

Hello everyone,

Since the NextJS app router is relatively new. I wanted to build something with it and share it.

And decided to build an Instagram stories clone using app router's intercepting and parallel routes.

Here is a little preview of the result;

NextJS stories

It basiclly takes few steps to built it.

  • Create new NextJS project with npx create-next-app@latest

  • Create stories modal in /src/app/@modal/(.)stroies/[...params]/page.tsx and put it in to the roout layout. Paralell route docs - Intercepting route docs

  • Create stories page in /src/app/stories/[...params]/page.tsx to match when user reloads or directly goes to /stroies/...

  • Add some styling with mantine.dev

Github link;
https://github.com/imburak/nextjs-stories

💖 💪 🙅 🚩
burak94
Burak Tarım

Posted on January 9, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related