preline icon indicating copy to clipboard operation
preline copied to clipboard

Add NextJS 13 example

Open yoDon opened this issue 1 year ago • 6 comments

Adding a NextJS TypeScript example and some README steps on using Preline with NextJS 13.

This might be helpful to folks who had questions in https://github.com/htmlstreamofficial/preline/issues/101 and https://github.com/htmlstreamofficial/preline/issues/83

yoDon avatar Aug 20 '23 18:08 yoDon

Can confirm that install instructions do work

2a5A1Ghu1 avatar Aug 24 '23 03:08 2a5A1Ghu1

I also confirm that the instructions work.

You're tackling two things here:

  • language choice (js vs ts)
  • router choice (app vs pages)

One good improvement could be to highlight that this solution works for the TypeScript with App Router. Currently available instructions are good for JavaScript with the legacy Pages router (and they are still correct).

oskarkocol avatar Aug 25 '23 00:08 oskarkocol

Hi @yoDon , i´m using NextJS 13 with Type Script, but I'm not using app folder, so i don´t have a layout.tsx file Should i put <PrelineLoader /> in _app.tsx?

Thx

Xt-Man avatar Aug 31 '23 18:08 Xt-Man

@Xt-Man I think that should work. Did it not work for you? Alternatively, since you're not using the App folder you should also be able to use the original NextJS 12 instructions that are currently at https://preline.co/docs/frameworks-nextjs.html

yoDon avatar Sep 04 '23 12:09 yoDon

Exactly what I was looking for, thanks! Can confirm the doco worked for me on a fresh project using NextJS 13 with App Router and TypeScript

theonlyway avatar Sep 07 '23 12:09 theonlyway

that really works for me too, nice job!

felipemaccari avatar Sep 20 '23 19:09 felipemaccari

First of thanks for the input @yoDon - closing this PR, we've added a backlink to your forked repo on framework guides page here

jahaganiev avatar Apr 03 '24 16:04 jahaganiev