- To export a static Next.js site (without React-bundle and client-side hydration), set this for all pages:
export const config = { unstable_runtimeJS: false, }; - Add interactivity to the exported static markup using AlpineJS.
- If needed, you can use an external js-file for example by:
- Add a link-tag to Head:
<Head> <script type="text/javascript" src="/foo.js" /> </Head> - Inline the source file using webpack's raw-loader
dangerouslySetInnerHTML(see counter.js) - For critical js, inline the source to the Head-tag (see _document.js)
- Add a link-tag to Head:
- Configure
throwIfNamespace": falseto make Alpine's hyphen-separated attributes work with Next (see .babelrc) - Note: if an element's markup is changed by AlpineJS (for example when using Alpine's
x-text) you might get a React warning in development-mode (e.g. Warning: Text content did not match). To prevent this, wrap the element in :This prevents Next.js from rendering (and hence also hot-reloading) the element on the client-side (see counter.js).<StaticContent><button x-on:click="open = !open" x-text="open ? 'hide' : 'show'">Toggle</button></StaticContent>
- https://www.johanbleuzen.fr/blog/next-remove-clientside-javascript
- https://webcloud.se/blog/2020-03-12-nextjs-without-client-side-react/
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent