I just wrote about creating tension by showing The Wrong Way First, but there are other ways to do this, too.

I said the Wrong Way First method isn't as effective when introducing new concepts. So, how can tension be created effectively in that case?

This example comes from the same author and the same course. The learning objective is straightforward:

Demonstrate how to create route groups using the Next.js app router

Route groups would be a concept unfamiliar to the learner who is learning about Next.js app router. Therefore, it's hard to create the same kind of tension by showing the wrong way because there is no context for the learner to know the right way.

In this case, the author created tension by introducing the concept, starting with how the learner expects to solve a problem, which I will call the Why Won't That Work method.

First, narrate the problem that needs to be solved. The problem should be rooted in a "job to be done" by the learner. In other words, it should be practical and based on their real-world context.

In this case, the learner may want to create a new route (page) that is organized differently than the rest of the app – perhaps for the sales team if the learner is a developer.

The problem is that defining a folder in the app router becomes part of the URL pathname. So, if you create a sales folder to add a book-a-call page, the URL will be mysite.com/sales/book-a-call which is undesirable – you'd want to get rid of the /sales/ segment.

This is how the author introduces the problem through narration and demo. In the learner's mind, they are asking themselves:

Why won't that work?

The tension comes from asking a question that demands an answer. Developers especially love solving problems, so when you present a problem like this, their mind goes into solution mode. I want to know how to solve this. PLEASE TELL ME.

You then release the tension by offering the solution. The narration may go something like this:

This doesn't work because the sales folder is being treated as part of the URL structure. But we don't want that – we want it without the sales part. So how do you get it to work? The answer in Next.js is to use what are called 'route groups.'

By wrapping the folder name with parenthesis like (sales) Next.js will remove that segment from the resulting URL path to get your desired mysite.com/book-a-call path, while still retaining an organized file structure that your team might want.

Bam, tension released.

Have a lovely day,
Kamran