SSR
SSG
SEO !
AMP
REACT
NODEJS
npx create-next-app my-project
npx create-next-app --example with-typescript my-project
SWR
fetcher
function fetcher(url: string, options:any) {
return fetch(url, options)
.then((r) => r.json())
.then((data) => {
return data
})
}
import useSWR from 'swr'
const { error, data } = useSWR<ResponseType>(url, fetcher)
https://github.com/vercel/swr
Import aliases
const path = require('path')
module.exports = {
webpack(config) {
config.resolve.alias['@lib'] = path.join(__dirname, 'lib')
config.resolve.alias['@components'] = path.join(__dirname, 'components')
return config
},
}
tsconfig.json
"baseUrl": "./",
"paths": {
"@lib/*": ["lib/*"],
"@components/*": ["components/*"]
}
Deploying
Vercel.com
MongoDb
1 - Connect on each request
2 - Reuse connection
CI / CD (Github Actions + Google App Engine)
export async function getServerSideProps(context) {
// Call database or a external API
return {
props: {}, // will be passed to the page component as props
}
}
function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li>{post.title}</li>
))}
</ul>
)
}
export async function getServerSideProps() {
// Call an external API endpoint to get posts.
// You can use any data fetching library
const res = await fetch('https://.../posts')
const posts = await res.json()
// By returning { props: posts }, the Blog component
// will receive `posts` prop
return {
props: {
posts,
},
}
}
export default Blog
function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li>{post.title}</li>
))}
</ul>
)
}
export async function getStaticProps() {
// Call an external API endpoint to get posts.
// You can use any data fetching library
const res = await fetch('https://.../posts')
const posts = await res.json()
// By returning { props: posts }, the Blog component
// will receive `posts` as a prop at build time
return {
props: {
posts,
},
}
}
export default Blog
import useSWR from 'swr'
function Profile () {
const { data, error } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}