Skip to content

Commit b0dad3b

Browse files
CodeInDnaCodeInDna
committed
Working with nextjs
1 parent 9239524 commit b0dad3b

File tree

9 files changed

+5585
-0
lines changed

9 files changed

+5585
-0
lines changed

‎first-next/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.next

‎first-next/components/navBar.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Link from 'next/link';
2+
const NavBar = () => {
3+
const styles = {
4+
display: "flex",
5+
backgroundColor: "grey",
6+
justifyContent: "space-between",
7+
padding: "1rem"
8+
}
9+
return(
10+
<div style={styles}>
11+
<Link href="/">
12+
<a>Home</a>
13+
</Link>
14+
<Link href="/about">
15+
<a>About</a>
16+
</Link>
17+
<Link href="/contact">
18+
<a>Contact</a>
19+
</Link>
20+
</div>
21+
)
22+
}
23+
24+
export default NavBar;

‎first-next/package-lock.json‎

Lines changed: 5439 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎first-next/package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "first-next",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "next",
8+
"build": "next build",
9+
"start": "next start"
10+
},
11+
"keywords": [],
12+
"author": "",
13+
"license": "ISC",
14+
"dependencies": {
15+
"axios": "^0.19.0",
16+
"next": "^8.1.0",
17+
"react": "^16.8.6",
18+
"react-dom": "^16.8.6"
19+
}
20+
}

‎first-next/pages/_app.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import App, { Container } from 'next/app';
3+
import NavBar from '../components/navBar';
4+
class MyApp extends App {
5+
static async getInitialProps({ Component, ctx }) {
6+
let pageProps = {};
7+
8+
if (Component.getInitialProps) {
9+
pageProps = await Component.getInitialProps(ctx);
10+
}
11+
12+
return { pageProps };
13+
}
14+
15+
render() {
16+
const { Component, pageProps } = this.props;
17+
return (
18+
<Container>
19+
<NavBar />
20+
<Component {...pageProps} />
21+
</Container>
22+
);
23+
}
24+
}
25+
26+
export default MyApp;

‎first-next/pages/about.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
const AboutPage = () => {
3+
console.log("ABOUT PAGE");
4+
return(
5+
<div>
6+
<h1>This is the about Page!!</h1>
7+
</div>
8+
)
9+
}
10+
11+
export default AboutPage;

‎first-next/pages/contact.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
const ContactPage = () => (
3+
<div>
4+
<h1>This is the Contact Page!!</h1>
5+
</div>
6+
);
7+
8+
export default ContactPage;

‎first-next/pages/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, {Component} from 'react';
2+
import MyApp from './_app';
3+
import axios from 'axios';
4+
import Link from 'next/link';
5+
/*class Index extends Component{
6+
static async getInitialProps(){
7+
console.log("FETCH");
8+
}
9+
render(){
10+
return(
11+
<h1>Index Page</h1>
12+
)
13+
}
14+
}*/
15+
const Index = ({posts}) => {
16+
return(
17+
<div>
18+
19+
<h1>Index Page</h1>
20+
{posts.map(post => (
21+
<li key={post.id}>
22+
<Link href={`/post?id=${post.id}`} as={`/p/${post.id}`}><a>{post.title}</a></Link>
23+
</li>
24+
))}
25+
</div>
26+
)
27+
}
28+
Index.getInitialProps = async() => {
29+
// https://jsonplaceholder.typicode.com/posts
30+
const res = await axios.get("https://jsonplaceholder.typicode.com/posts")
31+
const {data} = res;
32+
return {posts: data}
33+
}
34+
export default Index

‎first-next/pages/post.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// import {withRouter} from 'next/router';
2+
import axios from 'axios';
3+
const Post = ({id, comments}) => (
4+
<div>
5+
<h1>Comments for post id: {id}</h1>
6+
{comments.map(comment => (
7+
<div key={comment.id}>
8+
<h5>{comment.email}</h5>
9+
<p>{comment.body}</p>
10+
</div>
11+
))}
12+
</div>
13+
);
14+
15+
Post.getInitialProps = async({query}) =>{
16+
const res = await axios.get(`https://jsonplaceholder.typicode.com/comments?postId=${query.id}`)
17+
const {data} = res;
18+
return {...query, comments: data};
19+
}
20+
// export default withRouter(Post);
21+
export default Post;

0 commit comments

Comments
 (0)