fix (next): updated getting started guide after v5 tests

Author: cwomack

src/fragments/start/getting-started/next/api.mdx

@@ -15,30 +15,36 @@ amplify add api
 Select the explicit values below to enable **API key** (for public read access) and **Cognito User Pools** (for authenticated access).
 
 ```
-? Select from one of the below mentioned services: GraphQL
+? Select from one of the below mentioned services: (GraphQL)
+
 ? Here is the GraphQL API that we will create. Select a setting to edit or continue
-Authorization modes: API key (default, expiration time: 7 days from now)
-? Choose the default authorization type for the API Amazon Cognito User Pool
-Using service: Cognito, provided by: awscloudformation
+Authorization modes: (API key (default, expiration time: 7 days from now))
+
+? Choose the default authorization type for the API: (Amazon Cognito User Pool)
 
+Using service: Cognito, provided by: awscloudformation
 The current configured provider is Amazon Cognito.
 
-Do you want to use the default authentication and security configuration? Default configuration
+? Do you want to use the default authentication and security configuration? Default configuration: (Default configuration) 
 
 Warning: you will not be able to edit these selections.
 
-How do you want users to be able to sign in? Username
-Do you want to configure advanced settings? No, I am done.
+? How do you want users to be able to sign in? (Username)
+? Do you want to configure advanced settings? No, I am done. (No, I am done.)
+
 ✅ Successfully added auth resource nextamplified locally
 
 ✅ Some next steps:
 "amplify push" will build all your local backend resources and provision it in the cloud
 "amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
 
-? Configure additional auth types? No
-? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
-? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
+? Configure additional auth types? (No)
+? Here is the GraphQL API that we will create. Select a setting to edit or continue: (Continue)
+? Choose a schema template: (Single object with fields (e.g., “Todo” with ID, name, description))
+
+# You should see that the GraphQL schema compiled successfully and the location for the file. 
 
+? Do you want to edit the schema now? (Yes)
 
 ```
 
@@ -89,16 +95,18 @@ amplify push
 
 
 API key configuration
-✔ Enter a description for the API key: ·
-✔ After how many days from now the API key should expire (1-365): · 7
-GraphQL schema compiled successfully.
-
-? Do you want to generate code for your newly created GraphQL API Yes
-? Choose the code generation language target javascript
-? 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 Yes
-? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
+✔ Enter a description for the API key: · (Just hit enter)
+✔ After how many days from now the API key should expire (1-365): · 7 (Just hit enter)
+
+# You should see that the GraphQL schema compiled successfully.
+
+? Do you want to generate code for your newly created GraphQL API: (Yes)
+? Choose the code generation language target: (javascript)
+? Enter the file name pattern of graphql queries, mutations and subscriptions (src/graphql/**/*.js) (Just hit enter)
+? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions: (Yes)
+? Enter maximum statement depth [increase from default if your schema is deeply nested]: (2)
 
+# Wait a minute or so for the deployment into the dev environment to complete
 ...
 
 ✔ Generated GraphQL operations successfully and saved at src/graphql
@@ -228,13 +236,19 @@ Amplify.configure({ ...awsExports, ssr: true });
 
 export async function getServerSideProps({ req }) {
   const SSR = withSSRContext({ req });
-  const response = await SSR.API.graphql({ query: listPosts });
-
-  return {
-    props: {
-      posts: response.data.listPosts.items
-    }
-  };
+  try {
+    const response = await SSR.API.graphql({ query: listPosts });
+    return {
+      props: {
+        posts: response.data.listPosts.items,
+      },
+    };
+  } catch (err) {
+    console.log(err);
+    return {
+      props: {},
+    };
+  }
 }
 
 async function handleCreatePost(event) {
@@ -346,7 +360,10 @@ Submit that form to create a new post, and you'll build that page next!
 
 Statically generating pages during the build process improves performance. But, dynamically created posts still need to not `404`.
 
-To solve this, create **pages/posts/[id].js** and paste in the following content:
+To solve this, create a new folder within **/pages** named "posts".  Next, create a new file within this new **/posts** named **[id].js** to create the structure: 
+**pages/posts/[id].js**.  
+
+Paste the following content into the newly made **[id].js** file:
 
 ```jsx
 import { Amplify, API, withSSRContext } from 'aws-amplify';
@@ -359,29 +376,16 @@ import styles from '../../styles/Home.module.css';
 
 Amplify.configure({ ...awsExports, ssr: true });
 
-export async function getStaticPaths() {
-  const SSR = withSSRContext();
-  const { data } = await SSR.API.graphql({ query: listPosts });
-  const paths = data.listPosts.items.map((post) => ({
-    params: { id: post.id }
-  }));
-
-  return {
-    fallback: true,
-    paths
-  };
-}
-
-export async function getStaticProps({ params }) {
-  const SSR = withSSRContext();
+export async function getServerSideProps({req, params}) {
+  const SSR = withSSRContext({req});
   const { data } = await SSR.API.graphql({
     query: getPost,
     variables: {
       id: params.id
     }
   });
-
-  return {
+  console.log(data)
+  return { 
     props: {
       post: data.getPost
     }
@@ -441,9 +445,7 @@ Let's walk through some of this file:
 
 - **Amplify.configure** – For authenticated requests to work on the server, your client has to be configured with `ssr: true` to make credentials available on subsequent requests.
 
-- **getStaticPaths** – Because the value of `[id]` isn't known at build-time, you need to provide all possible `paths` for Next.js to render pages for. You do this by querying all posts with `API.graphql`, and mapping each `post` into `{ params: { id: post.id }}`. These `params` are passed to `getStaticProps` next. Note that you return `fallback: true`. If this value were `false`, then any _new_ posts would return a `404` because they didn't exist at build-time. With `true`, static pages are returned quickly, while any new `id`s are looked up once.
-
-- **getStaticProps** – Because the `Post` components props aren't dynamic per-request, they're provided statically from `getStaticPaths` as `params`. Here, you use `params.id` to query for that specific post with `API.graphql`.
+- **getServerSideProps** - This will only run on the server-side and allows for fetching of data as we make the request.  Here, you use params.id to query for that specific post with API.graphql and await the response.
 
 - **Post** – `Post` is a functional component that renders the provided prop `post`. Because `fallback: true` was specified above, you have to account for a "loading" state while a new post may be fetched.
 

src/fragments/start/getting-started/next/setup.mdx

@@ -7,7 +7,9 @@ npx create-next-app next-amplified
 cd next-amplified
 ```
 
-This creates a new Next.js app in a directory called `next-amplified` and then switches us into that new directory.
+You'll need to select if you'd like to build this project with TypeScript (Yes) or JavaScript (No), and then if you'd like ESLint to be configured as well.  Note that if you select Typescript, there may be additional changes you'll need to make throughout this guide to files and configurations.  
+
+Once these have been selected, a new Next.js app will be created in a directory called `next-amplified` and then switches us into that new directory.
 
 Now that you're in the root of the project, you can run the app by using the following command:
 
@@ -48,12 +50,19 @@ Source directory path (src)
 
 Distribution directory path (build)
 
-Build command (npm run build)
+Build command (npm run-script build)
+
+Start command (npm run-script start)
+
+? Initialize the project with the above configuration? (Y/n) 
+
+# If you completed the introduction to Amplify steps, the default below is the profile you created with the `amplify configure` command.
+Using default provider  awscloudformation
+? Select the authentication method you want to use: (AWS profile)
 
-Start command (npm start)
+? Initialize the project with the above configuration? (Y/n) 
+? Do you want to use an AWS profile? (default)
 
-# This is the profile you created with the `amplify configure` command in the introduction step.
-Do you want to use an AWS profile?
 ```
 
 > Where possible the CLI will infer the proper configuration based on the type of project Amplify is being initialized in. In this case it knew you are using Create Next App and provided the proper configuration for type of app, framework, source, distribution, build, and start options.