Difference between app and page dir

Answered

Spectacled bear posted this in #help-forum

Open in Discord

Spectacled bearOP

2023-08-13T04:39:05.000Z

What is major difference between app and page directory. Anyone explain me.

Answered by @ts-ignore

https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app

View full answer

68 Replies

@Spectacled bear What is major difference between app and page directory. Anyone explain me.

@ts-ignore

2023-08-13T04:45:32.000Z

https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app

Answer

@@ts-ignore https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app

Spectacled bearOP

2023-08-13T04:46:03.000Z

One more thing is it possible to use nextauth in app dir

@Spectacled bear One more thing is it possible to use nextauth in app dir

@ts-ignore

2023-08-13T04:46:18.000Z

idk about next auth but authjs is possible ig

@@ts-ignore idk about next auth but authjs is possible ig

Spectacled bearOP

2023-08-13T04:47:07.000Z

can we make 1 layouts and use it for all page in app diflr?

@Spectacled bear can we make 1 layouts and use it for all page in app diflr?

@ts-ignore

2023-08-13T04:47:15.000Z

yes

just create that layout at app/layout.tsx and it will be reused througout the app

Spectacled bearOP

2023-08-13T04:47:39.000Z

Of index.tsx not work instead of page.tsx

@Spectacled bear Of index.tsx not work instead of page.tsx

@ts-ignore

2023-08-13T04:47:50.000Z

yes

@@ts-ignore yes

Spectacled bearOP

2023-08-13T04:48:42.000Z

One last why we need to make
app/shop/cart.tsx
We don't do app/cart.tsx??

@ts-ignore

2023-08-13T04:49:09.000Z

you need to make app/cart/page.tsx if you need a route at /cart

that's because those folders can have so many files like loading.tsx, layout.tsx

@@ts-ignore you need to make `app/cart/page.tsx` if you need a route at `/cart`

Spectacled bearOP

2023-08-13T04:50:17.000Z

Oh like this
app
Index.tsx
(shop)
cart.tsx
list.tsx

@Spectacled bear Oh like this app Index.tsx (shop) cart.tsx list.tsx

@ts-ignore

2023-08-13T04:50:46.000Z

Spectacled bearOP

2023-08-13T04:51:03.000Z

(shop) = group???

@ts-ignore

2023-08-13T04:51:19.000Z

app
  page.tsx
  (shop)
      page.tsx
      list
        page.tsx

Spectacled bearOP

2023-08-13T04:52:13.000Z

For https://domain.example we just need to do app/index.tsx??

@Spectacled bear For https://domain.example we just need to do app/index.tsx??

@ts-ignore

2023-08-13T04:52:27.000Z

you need to do app/page.tsx

app dir removed the concept of index.tsx

Spectacled bearOP

2023-08-13T04:52:48.000Z

Only page.tsx???

@Spectacled bear Only page.tsx???

@ts-ignore

2023-08-13T04:53:16.000Z

to create a route yes

Spectacled bearOP

2023-08-13T04:53:33.000Z

We can't make <cutom name>.tsx

@Spectacled bear We can't make <cutom name>.tsx

@ts-ignore

2023-08-13T04:53:40.000Z

Spectacled bearOP

2023-08-13T04:54:16.000Z

Oh so like for every app/page

We need to make dir for it

@Spectacled bear Oh so like for every app/page We need to make dir for it

@ts-ignore

2023-08-13T04:54:21.000Z

yes

Spectacled bearOP

2023-08-13T04:54:47.000Z

Like I have 2 page like premium and status how can we get it in domain/here

@Spectacled bear Like I have 2 page like premium and status how can we get it in domain/here

@ts-ignore

2023-08-13T04:55:39.000Z

app/premium/page.tsx and app/status/page.tsx then these will be accessible at domain.com/premium and domain.com/status

Spectacled bearOP

2023-08-13T04:55:57.000Z

Okay thanks

All confusion solve

@@ts-ignore `app/premium/page.tsx` and `app/status/page.tsx` then these will be accessible at `domain.com/premium` and `domain.com/status`

Spectacled bearOP

2023-08-13T04:56:23.000Z

But we can use prams

@ts-ignore

2023-08-13T04:56:34.000Z

paras?

Spectacled bearOP

2023-08-13T04:56:45.000Z

app/status/[Id]/list

@Spectacled bear app/status/[Id]/list

@ts-ignore

2023-08-13T04:56:56.000Z

yes

@Spectacled bear app/status/[Id]/list

@ts-ignore

2023-08-13T04:57:13.000Z

https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

Spectacled bearOP

2023-08-13T04:57:14.000Z

Is getserverprops work I'm app directory

@Spectacled bear Is getserverprops work I'm app directory

@ts-ignore

2023-08-13T04:57:20.000Z

Spectacled bearOP

2023-08-13T04:57:26.000Z

Then,m

@ts-ignore

2023-08-13T04:57:27.000Z

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

everything is in docs bruh

Spectacled bearOP

2023-08-13T04:57:36.000Z

Hmmk

Can't find it

This is issue

@Spectacled bear Can't find it

@ts-ignore

2023-08-13T04:58:02.000Z

if your problem is resolved, mark this as solved

Spectacled bearOP

2023-08-13T04:58:07.000Z

I don't know name of new functions

@@ts-ignore if your problem is resolved, mark this as solved

Spectacled bearOP

2023-08-13T04:58:17.000Z

Sure

@@ts-ignore if your problem is resolved, mark this as solved

Spectacled bearOP

2023-08-13T05:01:49.000Z

Is app dir fetch api from server side?

@Spectacled bear Is app dir fetch api from server side?

@ts-ignore

2023-08-13T05:02:16.000Z

yes, you fetch data serverside and then use it in the same page or pass it down as a prop to other components

@@ts-ignore yes, you fetch data serverside and then use it in the same page or pass it down as a prop to other components

Spectacled bearOP

2023-08-13T05:03:04.000Z

Under the export or outside of export

@Spectacled bear Under the export or outside of export

@ts-ignore

2023-08-13T05:03:17.000Z

sorry what?

@@ts-ignore sorry what?

Spectacled bearOP

2023-08-13T05:03:58.000Z

async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main></main>
}

@ts-ignore

2023-08-13T05:04:01.000Z

read the docs I sent you above

they have everything

@@ts-ignore they have everything

Spectacled bearOP

2023-08-13T05:04:49.000Z

Is that function work like this

export default async function Page() {
  async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}
 
  return <main></main>
}