Next.js provides a router which can be utilized via a component imported via `next/link`, a wrapper `withRouter(Component)`, and now a hook `useRouter()`.
Next.js provides a router which can be utilized via a component imported via `next/link`, a wrapper `withRouter(Component)`, and now a hook `useRouter()`.
When using any of these, it is expected they are only used for internal navigation, i.e. navigating between pages in the same Next.js application.
Either you passed a non-internal `href` to a `next/link` component or you called `Router#push` or `Router#replace` with one.
? Enter a name for the environment: dev (or whatever you would like to call this env)
? Choose your default editor: <YOUR_EDITOR_OF_CHOICE>
? Choose the type of app that you're building (Use arrow keys)
android
ios
❯ javascript
android
ios
❯ javascript
? What javascript framework are you using react
? Source Directory Path: src
? Distribution Directory Path: out
...
...
@@ -71,11 +76,11 @@ $ amplify init
$ amplify add api
# <Interactive>
? Please select from one of the below mentioned services (Use arrow keys)
❯ GraphQL
REST
❯ GraphQL
REST
? Provide API name: <API_NAME>
? Choose an authorization type for the API (Use arrow keys)
❯ API key
❯ API key
Amazon Cognito User Pool
? Do you have an annotated GraphQL schema? (y/N) y
? Provide your schema file path: ./schema.graphql
...
...
@@ -90,12 +95,12 @@ $ amplify push
? Are you sure you want to continue? Y
? Do you want to generate code for your newly created GraphQL API? Y
? Choose the code generation language target (Use arrow keys)
javascript
❯ typescript
javascript
❯ typescript
flow
? Enter the file name pattern of graphql queries, mutations and subscriptions (src/graphql/**/*.js)
? Enter the file name pattern of graphql queries, mutations and subscriptions (src/graphql/**/*.js)
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions (Y/n) Y
? Enter maximum statement depth [increase from default if your schema is deeply nested] (2)
? Enter maximum statement depth [increase from default if your schema is deeply nested] (2)
# </Interactive>
```
...
...
@@ -114,7 +119,7 @@ yarn dev
1. Open [`amplify/backend/api/nextjswithamplifyts/schema.graphql`](amplify/backend/api/nextjswithamplifyts/schema.graphql) and change what you need to.
2. Run `amplify push`
3. 👍
3. 👍
## The idea behind the example
...
...
@@ -124,10 +129,8 @@ We use AWS Amplify to generate code and to manage and consume the AWS cloud reso
The NextJS app has dynamic and static routes to demonstrate how to load data on the server based on the incoming request.
Two routes are implemented :
Two routes are implemented :
-`/` : A static route that uses getInitialProps to load data from AppSync and renders it on the server (Code in [pages/index.tsx](/pages/index.tsx))
-`/todo/[id]` : A dynamic route that uses getInitialProps and the id from the provided context to load a single todo from AppSync and render it on the server. (Code in [pages/todo/:[id].tsx](/pages/todo/[id].tsx))
@@ -137,10 +142,8 @@ We use AWS Amplify to generate code and to manage and consume the AWS cloud reso
The NextJS app has dynamic and static routes to demonstrate how to load data on the server based on the incoming request.
Two routes are implemented :
Two routes are implemented :
-`/` : A static route that uses getInitialProps to load data from AppSync and renders it on the server (Code in [pages/index.js](/pages/index.js))
-`/todo/[id]` : A dynamic route that uses getInitialProps and the id from the provided context to load a single todo from AppSync and render it on the server. (Code in [pages/todo/:[id].js](/pages/todo/[id].js))
This example show how you can use Next.js inside an Electron application to avoid a lot of configuration, use Next.js router as view and use server-render to speed up the initial render of the application. Both Next.js and Electron layers are written in TypeScript and compiled to JavaScript during the build process.
For development it's going to run a HTTP server and let Next.js handle routing. In production it use `next export` to pre-generate HTML static files and use them in your app instead of running an HTTP server.
You can create the production app using `npm run dist`.
_note regarding types:_
* Electron provides its own type definitions, so you don't need @types/electron installed!
* There were no types available for `electron-next` at the time of creating this example, so until they are available there is a file `electron-next.d.ts` in `electron-src` directory.
- Electron provides its own type definitions, so you don't need @types/electron installed!
- There were no types available for `electron-next` at the time of creating this example, so until they are available there is a file `electron-next.d.ts` in `electron-src` directory.
- All pages should be unique across zones. For example, the 'home' app should not have a `pages/blog/index.js` page.
- The 'blog' app sets `assetPrefix` so that generated JS bundles are within the `/blog` subfolder.
- To also support the plain `next dev` scenario, `assetPrefix` is set dynamically based on the `BUILDING_FOR_NOW` environment variable, see [`now.json`](now.json) and [`blog/next.config.js`](blog/next.config.js).
- Images and other `/static` assets have to be prefixed manually, e.g., ``<img src={`${process.env.ASSET_PREFIX}/static/image.png`} />``, see [`blog/pages/blog/index.js`](blog/pages/blog/index.js).
- To also support the plain `next dev` scenario, `assetPrefix` is set dynamically based on the `BUILDING_FOR_NOW` environment variable, see [`now.json`](now.json) and [`blog/next.config.js`](blog/next.config.js).
- Images and other `/static` assets have to be prefixed manually, e.g., `` <img src={`${process.env.ASSET_PREFIX}/static/image.png`} /> ``, see [`blog/pages/blog/index.js`](blog/pages/blog/index.js).
